Zwei Inline-Block-Elemente mit jeweils 50% Breite passen nicht nebeneinander in eine einzelne Reihe

87

<!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/

Der obige Code versucht, das #left div und das #right div nebeneinander in einer einzigen Zeile zu platzieren. Wie Sie in der obigen JSFiddle-URL sehen können, ist dies jedoch nicht der Fall.

Ich kann das Problem beheben und die Breite eines der Divs auf 49% reduzieren. Siehe http://jsfiddle.net/mUKSC/ . Dies ist jedoch keine ideale Lösung, da zwischen den beiden Divs eine kleine Lücke auftritt.

Eine andere Möglichkeit, das Problem zu lösen, besteht darin, beide Divs zu schweben. Siehe http://jsfiddle.net/VptQm/ . Das funktioniert gut.

Aber meine ursprüngliche Frage bleibt. Warum passen beide Divs nicht nebeneinander, wenn sie als Inline-Block-Elemente beibehalten werden?

html css

— Einsamer Lernender
quelle

135

Bei der Verwendung von inline-blockElementen tritt immer ein whitespace Problem zwischen diesen Elementen auf (dieser Abstand ist ungefähr 4 Pixel breit).

Also, Ihre beiden divs, die beide 50% Breite haben, plus das whitespace(~ 4px) ist mehr als 100% breit, und so bricht es. Beispiel für Ihr Problem:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Es gibt einige Möglichkeiten, dies zu beheben:

1. Kein Leerzeichen zwischen diesen Elementen

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

2. Verwenden von HTML-Kommentaren

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

3. Setzen Sie die Eltern font-sizeauf 0und fügen Sie den inline-blockElementen einen Wert hinzu

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

4. Verwenden Sie einen negativen Abstand zwischen ihnen ( nicht vorzuziehen )

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

5. Schließwinkel fallen lassen

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

6. Überspringen bestimmter HTML-Abschluss-Tags (danke @thirtydot für die Referenz )

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Verweise:

Wie @ MarcosPérezGude sagte , ist es am besten , das Tag zu verwenden remund einen Standardwert hinzuzufügen (wie in HTML5Boilerplate ). Beispiel:font-sizehtml

html{
    font-size: 1em;
}

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

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

Update : Da es fast 2018 ist, verwenden Sie Flexbox oder noch besser - CSS- Rasterlayout .

— Vucko
quelle

3

@hoosierEE das ist nicht nosense. Der Abstand zwischen den Elementen ist in Ordnung, da Inline-Block-Elemente an der Textzeile positioniert werden. Wenn Sie ein Leerzeichen in eine Zeile einfügen, wird ein Leerzeichen eingefügt. Das Verhalten ist also richtig, auch wenn Sie denken, dass dies ein Problem ist (wie Vucko es falsch nennt).

— Marcos Pérez Gude

2

Ich stimme @ MarcosPérezGude zu, dieses Verhalten ist korrekt. Wie Sie meinem Beitrag entnehmen können, gibt es einige Möglichkeiten, dieses Leerzeichen zu entfernen (ich selbst verwende HTML-Kommentare, um den Leerraum zu entfernen). Aber wenn Sie diesen weißen Raum ausmachen, können Sie immer verwenden flexbox, table/table-row/table-celloder Verwendung float.

— Vucko

2

Ich benutze Inline-Blöcke perfekt. Mein normaler Ansatz ist parent { font-size:0; } child {font-size: 1rem; }. Mit rems ist jetzt am einfachsten

— Marcos Pérez Gude

Es ist etwas ärgerlich, dass Tabulatoren immer noch als Leerzeichen analysiert werden. Ich habe noch nie gesehen, dass das Löschen des Closing-Tag-Fixes Instabilität oder Nebenwirkungen hat.

— MintWelsh

Stellen Sie auch sicher, dass ausgeschaltet borderist. Dies kann Speicherplatz hinzufügen, wenn Sie die Divs schweben lassen.

— Evolross

22

Gute Antwort in CSS3 ist:

white-space: nowrap;

im übergeordneten Knoten und:

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

in div (oder anderen) bei 50%

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

BEARBEITEN:

es gibt einen anderen Weg mit:

font-size: 0;

für übergeordneten Knoten und überschreiben Sie es im untergeordneten Knoten

— Matrix
quelle

7

Dies liegt daran, dass das Leerzeichen zwischen Ihren beiden Divs als Leerzeichen interpretiert wird. Wenn Sie Ihre <div>Tags wie unten gezeigt in eine Linie bringen, wird das Problem behoben :

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

— Dan
quelle

4

Weil zwischen den Elementen ein Leerzeichen ist. Wenn Sie alle Leerzeichen entfernen, passen sie .

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

— Michiel van Oosterhout
quelle

4

Entweder machen sie Block statt Inline-Block. Dadurch werden Divs so ignoriert, dass Leerzeichen zwischen ihnen ignoriert werden.

display:block;

oder entfernen Sie Leerzeichen zwischen Tags

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

oder hinzufügen

margin: -1en;

zu einem der divs, um den von einem einzelnen gerenderten Raum eingenommenen Raum zu verringern.

— vittore
quelle

2

Bitte überprüfen Sie den folgenden Code:

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>

Erweitern Sie das Snippet

— Vaneet Thakur
quelle

2

Flexbox-Beispiel - Dies wird für die übergeordnete Klasse verwendet, die die beiden nebeneinander liegenden Elemente enthält.

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

Entnommen aus der vertikalen Zentrierung eines Divs in einem anderen Div

— nbixler
quelle

1

Dies kann durch Hinzufügen der CSS-Anzeige: Inline zu dem Div erfolgen, das die Inline-Elemente enthält.

Beim Entfernen des Leerraums mithilfe eines Randes mit einem negativen Wert muss dieser zu diesem bestimmten Element hinzugefügt werden. Das Hinzufügen zu einer Klasse wirkt sich auf Orte aus, an denen diese Klasse verwendet wurde.

Es wäre also sicherer, display zu verwenden: inline;

— Vish
quelle

0

float hinzufügen : left; zu beiden div-Tags.

div {
  float: left;
}

Erweitern Sie das Snippet

— Tatenda
quelle