Wie platziert man zwei Divs nebeneinander?

Question

Betrachten Sie die folgender Code :

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Ich möchte, dass die beiden Divs innerhalb des Wrapper-Divs nebeneinander liegen. In diesem Fall sollte die Höhe des grünen Divs die Höhe des Wrappers bestimmen.

Wie kann ich dies mit CSS erreichen?

Answer 1

Ein oder beide innere Divs schweben lassen.

Ein Div schwebend:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

oder wenn Sie beides schweben lassen, müssen Sie den Wrapper ermutigen div die beiden schwebenden Kinder enthalten, sonst denkt es, es sei leer und setzt den Rahmen nicht um sie herum

Beide Divs schwebend:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

Answer 2

Wenn Sie zwei Divs haben, können Sie auch die display Eigentum:

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

<div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

Si div1 eine bestimmte Höhe überschreitet, div2 wird platziert neben div1 am unteren Ende. Um dies zu lösen, verwenden Sie vertical-align:top; en div2 .

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid red;
}
#div2 {
    vertical-align:top;
    display: inline-block;
    width:160px;
    height:160px;
    border: 1px solid green;
}

<div id="wrapper">
    <div id="div1">The two divs are<br/><br/><br/><br/><br/><br/></div>
    <div id="div2">next to each other.</div>
</div>

jsFiddle für Beispiel 1 .

jsFiddle für Beispiel 2 .

Answer 3

Mit Hilfe der CSS-Eigenschaft float können Sie Elemente nebeneinander platzieren:

#first {
float: left;
}
#second {
float: left;
}

Sie müssen sicherstellen, dass die Wrapper-Div für das Floating in Bezug auf die Breite, und Ränder usw. korrekt eingestellt sind.

Answer 4

Versuchen Sie, das Flexbox-Modell zu verwenden. Es ist einfach und kurz zu schreiben.

Live Jsfiddle

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

Die Standardrichtung ist Zeile. Sie werden also innerhalb des #Wrappers nebeneinander ausgerichtet. Aber es ist nicht unterstützt IE9 oder weniger als die Versionen

Answer 5

Option 1

Utilice float:left bei beiden div Elemente und setzen Sie eine %-Breite für beide div-Elemente mit einer kombinierten Gesamtbreite von 100 %.

Utilice box-sizing: border-box; auf den schwebenden Div-Elementen. Der Wert border-box zwingt das Padding und die Ränder in die Breite und Höhe, anstatt sie zu erweitern.

Verwenden Sie clearfix auf dem <div id="wrapper"> um die schwebenden untergeordneten Elemente zu löschen, wodurch das Wrapper-Div auf die richtige Höhe skaliert wird.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

Option 2

Utilice position:absolute auf einem Element und eine feste Breite auf dem anderen Element.

Position:relativ hinzufügen zu <div id="wrapper"> Element zu machen, um untergeordnete Elemente absolut an die <div id="wrapper"> Element.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Option 3

Utilice display:inline-block bei beiden div Elemente und setzen Sie eine %-Breite für beide div-Elemente mit einer kombinierten Gesamtbreite von 100 %.

Und wieder (wie bei float:left Beispiel) verwenden box-sizing: border-box; auf die div-Elemente. Der Wert border-box zwingt das Padding und die Ränder in die Breite und Höhe, anstatt sie zu erweitern.

HINWEIS: Inline-Block-Elemente können Abstandsprobleme haben, da sie von Leerzeichen im HTML-Markup beeinflusst werden. Weitere Informationen finden Sie hier: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

Eine letzte Möglichkeit wäre die Verwendung der neuen Anzeigeoption namens flex, aber beachten Sie, dass dabei die Browserkompatibilität ins Spiel kommen könnte:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html