Ich habe einige ziemlich einfache HTML/CSS, die nicht so funktionieren, wie ich es erwarte. Grundsätzlich habe ich mein Körper-Setup zu 400px breit sein. Ich habe dann zwei divs innerhalb des Körpers mit expliziten Breiten von 300px und 100px. Darüber hinaus sind beide dieser divs eingestellt, um display: inline-block . Aus irgendeinem Grund bricht das 100px div aus dem Inhaltsbereich des Körpers heraus und erscheint darunter. Ich weiß nicht, warum das passiert. Wenn ich die Breite von 100px auf 96px setze, funktioniert es. Wenn ich sie jedoch auf 97px, 98px, 99px oder zurück auf 100px setze, funktioniert sie nicht. Ich finde dieses Verhalten sehr merkwürdig. Kann mir jemand erklären, was da schief läuft?
Beachten Sie, dass ich dies mit Chrome (Beta Channel) teste. Der Code ist unten.
Der CSS:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
}
.list-container {
display: inline-block;
width: 300px;
height: 100%;
background-color: red;
}
.button-container {
display: inline-block;
width: 100px;
height: 100%;
background-color: blue;
}Das HTML:
<body>
<div class="list-container">
</div>
<div class="button-container">
</div>
</body>
