Warum funktioniert "Inline-Block" in diesem CSS nicht richtig?

Question

Bitte überprüfen Sie die CSS unten.

/*rex is the container of ex,ex2,ex3*/ 
div.rex{ 
height:200px; 
border:0px; 
margin:60px auto; 
padding: 0; 
vertical-align:top; 
} 

div.ex{ 
width:34%; 
height:200px; 
background-color:#4f443a; 
display:inline-block; 
margin: 0; 
padding: 0; 
vertical-align:top; 
} 

div.ex2{ 
width:0.5%; 
height:200px; 
display:inline-block; 
margin: 0; 
padding: 0; 
vertical-align:top; 
} 


div.ex3{ 
width:65.5%; 
height:200px; 
background-color:#7e8547; 
display:inline-block; 
margin: 0; 
padding: 0; 
vertical-align:top; 
} 

Das Ergebnis in Browser:

Was ich brauche:

Answer 1

Dieses Verhalten tatsächlich in HTML zu erwarten ist. Da Sie Inline-Block verwenden, werden alle Zeilenvorschubzeichen oder Leerzeichen, die Sie nach dem Element und vor einem weiteren Inline-Element haben, als Leerzeichen gezählt. Wenn Sie möchten, dass die Blöcke wie in Ihrem Bild nebeneinander gestapelt werden, müsste Ihr HTML so aussehen.

<div class="rex"> 
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div> 
</div> 

working demo

Es ist nicht sehr hübsch, aber dann wieder, ich würde empfehlen, einen anderen Ansatz verwenden, möglicherweise die Elemente statt schwimmen.

Hier finden Sie eine detailliertere Erklärung, warum dies auftritt.

How to remove the space between inline-block elements?

Answer 2

hinzufügen float:left; zu Ihrem div.ex, div.ex2 und div.ex3 statt.

JSFIDDLE

UPDATE: hinzufügen position:absolute zweite und dritte div wenn float nicht eine Wahl.

FIDDLE

UPDATE 2: Fügen Sie diese auf nur 3. div, wenn Sie diesen Raum dazwischen müssen.

FIDDLE

Answer 3

Gerade Antwort erstreckt sich hier von @Tristan geben.

Sie haben den css-Code unnötigerweise wiederholt.Sie können es minify durch mehrere mit CSS wie:

.ex, .ex2, .ex3 { 
    display: inline-block; 
    vertical-align: top; 
    margin: 0; 
    padding: 0; 
    height: 100%; /* no need of height: 200px; here */ 
}     /* if you need to extend it to parent height */ 
        /* then use height: 100% */ 

ODER

div.rex > div { /* code here */ } 

Sie Elemente nebeneinander halten kann eine der unten unter Verwendung von Ansätzen:

• Using display: table-cell

• Using float: left

• Mit display: inline-block (check @Tristan's solution)

Answer 4

Mein Trick ist font-size einzustellen: 0; im Elternelement, weil es die Schriftgröße ist, die bewirkt, dass die Mathematik nicht perfekt addiert wird (etwa 4 px Überlappung pro div, abhängig von der Bildschirmgröße) und bewirkt, dass ein div unter dem anderen erscheint.

.rex{ 
display:block; 
font-size:0; 
} 

.ex{ 
width:34%; 
height:200px; 
background-color:#4f443a; 
display:inline-block; 
vertical-align:top; 
margin: 0 .5% 0 0; /*small space between divs*/ 
padding: 0; 
font-size:16px; /*restore font size*/ 
} 

.ex2{ 
width:65.5%; 
height:200px; 
background-color:#7e8547; 
display:inline-block; 
vertical-align:top; 
margin: 0; 
padding: 0; 
font-size:16px; 
} 

Answer 5

können Sie klagen Kommentare wie, dass (das in Code wenig besser aussieht):

<div class="rex"> 
    <div class="ex"><!-- 
--></div><div class="ex2"></div><!-- 
--><div class="ex3"></div> 
</div>