Due elementi inline-block, ciascuno del 50% di larghezza, non si adattano fianco a fianco in una singola fila

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/

Il codice sopra sta cercando di posizionare il div #left e il div #right, fianco a fianco, in una singola riga. Ma come puoi vedere nell'URL JSFiddle sopra, non è questo il caso.

Sono in grado di risolvere il problema riducendo la larghezza di uno dei div al 49%. Vedi http://jsfiddle.net/mUKSC/ . Ma questa non è una soluzione ideale perché appare un piccolo spazio tra i due div.

Un altro modo in cui sono in grado di risolvere il problema è fluttuare entrambi i div. Vedi http://jsfiddle.net/VptQm/ . Funziona bene.

Ma la mia domanda originale rimane. Perché quando entrambi i div sono mantenuti come elementi inline-block, non si adattano fianco a fianco?

Question 2

Quando si utilizzano inline-blockelementi, ci sarà sempre un whitespace problema tra questi elementi (lo spazio è largo circa 4 px).

Quindi, i tuoi due divs, che hanno entrambi il 50% di larghezza, più quello whitespace(~ 4px) è più del 100% di larghezza, e quindi si rompe. Esempio del tuo problema:

Mostra snippet di codice

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>

Espandi lo snippet

Ci sono alcuni modi per risolverlo:

1. Nessuno spazio tra questi elementi

Mostra snippet di codice

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>

Espandi lo snippet

2. Utilizzo di commenti HTML

Mostra snippet di codice

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>

Espandi lo snippet

3. Impostare i genitori font-sizesu 0, quindi aggiungere un valore agli inline-blockelementi

Mostra snippet di codice

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>

Espandi lo snippet

4. Utilizzo di un margine negativo tra di loro ( non preferibile )

Mostra snippet di codice

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>

Espandi lo snippet

5. Caduta dell'angolo di chiusura

Mostra snippet di codice

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>

Espandi lo snippet

6. Saltare alcuni tag di chiusura HTML (grazie @thirtydot per il riferimento )

Mostra snippet di codice

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>

Espandi lo snippet

Riferimenti:

Come @ MarcosPérezGude detto , il miglior modo è quello di utilizzare rem, e aggiungere un po valore predefinito per font-sizeil htmltag (come in HTML5Boilerplate ). Esempio:

html{
    font-size: 1em;
}

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

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

Aggiornamento : poiché è quasi il 2018, usa flexbox o, ancora meglio, layout a griglia CSS .

Question 3

una buona risposta in css3 è:

white-space: nowrap;

nel nodo genitore e:

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

in div (o altro) al 50%

esempio: http://jsfiddle.net/YpTMh/19/

MODIFICARE:

c'è un altro modo con:

font-size: 0;

per il nodo padre e sovrascriverlo nel nodo figlio

Question 4

È perché lo spazio tra i tuoi due div viene interpretato come uno spazio. Se metti i <div>tag in linea come mostrato di seguito, il problema viene risolto :

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

Question 5

Perché c'è uno spazio tra gli elementi. Se rimuovi tutti gli spazi bianchi, si adatteranno .

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

Question 6

O falli bloccare invece che inline-block. Questo renderà i div ignorando gli spazi tra di loro.

display:block;

o rimuovi lo spazio tra i tag

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

o aggiungi

margin: -1en;

a uno dei div in modo da mitigare lo spazio occupato dal singolo spazio renderizzato.

Question 7

Si prega di controllare sotto il codice:

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>

Espandi lo snippet

Question 8

Esempio di Flexbox: questo sarebbe usato per la classe genitore che tiene i due elementi affiancati.

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

Tratto dalla centratura verticale di un div all'interno di un altro div

Question 9

Può essere fatto aggiungendo il css display: inline al div che contiene gli elementi inline.

Durante la rimozione dello spazio bianco utilizzando un margine con un valore negativo, diventa necessario aggiungerlo a questo particolare elemento. Poiché l'aggiunta a una classe influirà sui luoghi in cui è stata utilizzata questa classe.

Quindi sarebbe più sicuro usare display: inline;

Question 10

aggiungi float: sinistra; a entrambi i tag div.

div {
  float: left;
}

Espandi lo snippet