Dwa elementy inline-block, każdy o szerokości 50%, nie pasują obok siebie w jednym rzędzie

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Powyższy kod próbuje umieścić elementy div #left i div #right obok siebie w jednym wierszu. Ale jak widać na powyższym adresie URL JSFiddle, tak nie jest.

Jestem w stanie rozwiązać ten problem, zmniejszając szerokość jednego z elementów div do 49%. Zobacz http://jsfiddle.net/mUKSC/ . Nie jest to jednak idealne rozwiązanie, ponieważ między dwoma elementami div pojawia się niewielka przerwa.

Innym sposobem rozwiązania problemu jest unoszenie obu elementów div. Zobacz http://jsfiddle.net/VptQm/ . To działa dobrze.

Ale moje pierwotne pytanie pozostaje. Dlaczego, skoro oba elementy div są przechowywane jako elementy inline-block, nie pasują obok siebie?

Question 2

Podczas korzystania z inline-blockelementów zawsze będzie istniał whitespace problem między tymi elementami (szerokość ta wynosi około ~ 4 piksele).

Więc twoje dwa divs, z których oba mają 50% szerokości, plus ten whitespace(~ 4px) ma ponad 100% szerokości, więc pęka. Przykład twojego problemu:

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Rozwiń fragment

Jest kilka sposobów, aby to naprawić:

1. Brak odstępu między tymi elementami

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

Rozwiń fragment

2. Korzystanie z komentarzy HTML

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

Rozwiń fragment

3. Ustaw rodziców font-sizena 0, a następnie dodaj wartość do inline-blockelementów

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

Rozwiń fragment

4. Stosowanie między nimi ujemnego marginesu ( nie zalecane )

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Rozwiń fragment

5. Opadający kąt zamknięcia

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

Rozwiń fragment

6. Pomijanie niektórych tagów zamykających HTML (dzięki @thirtydot za odniesienie )

Pokaż fragment kodu

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Rozwiń fragment

Bibliografia:

Jak @ MarcosPérezGude powiedział The najlepszym sposobem jest użycie remi dodać jakąś wartość domyślną font-sizena htmlznaczniku (jak w HTML5Boilerplate ). Przykład:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Aktualizacja : ponieważ jest prawie 2018 r., Użyj flexboksa lub jeszcze lepiej - układu siatki CSS .

Question 3

dobra odpowiedź w css3 to:

white-space: nowrap;

w węźle nadrzędnym i:

white-space: normal;
vertical-align: top;

w div (lub innym) przy 50%

przykład: http://jsfiddle.net/YpTMh/19/

EDYTOWAĆ:

jest inny sposób:

font-size: 0;

dla węzła nadrzędnego i nadpisz go w węźle podrzędnym

Question 4

Dzieje się tak, ponieważ biały znak między dwoma elementami div jest interpretowany jako spacja. Jeśli umieścisz <div>tagi w jednej linii, jak pokazano poniżej, problem zostanie rozwiązany :

<div id="left"></div><div id="right"></div>

Question 5

Ponieważ między elementami jest przestrzeń. Jeśli usuniesz wszystkie spacje, będą pasować .

<div id="left">Left</div><div id="right">Right</div>

Question 6

Albo spraw, by blokowały zamiast inline-block. Spowoduje to, że elementy div będą ignorować spacje między nimi.

display:block;

lub usuń odstępy między tagami

<div id='left'></div><div id='right'></div>

lub dodaj

margin: -1en;

do jednego z elementów div, aby złagodzić miejsce zajmowane przez pojedynczą renderowaną przestrzeń.

Question 7

Sprawdź poniższy kod:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Rozwiń fragment

Question 8

Przykład Flexbox - zostanie użyty dla klasy nadrzędnej trzymającej dwa obok siebie elementy.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Zaczerpnięte ze środkowania elementu div w pionie wewnątrz innego elementu div

Question 9

Można to zrobić, dodając display: inline do elementu div, który zawiera elementy inline.

Podczas usuwania spacji za pomocą marginesu o wartości ujemnej konieczne staje się dodanie go do tego konkretnego elementu. Dodanie go do klasy wpłynie na miejsca, w których ta klasa była używana.

Więc bezpieczniej byłoby użyć display: inline;

Question 10

dodaj float: left; do obu znaczników DIV.

div {
  float: left;
}

Rozwiń fragment