Wie platziere ich zwei Divs nebeneinander?

370

Betrachten Sie den folgenden 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>
Erweitern Sie das Snippet

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

Wie kann ich dies über CSS erreichen?

css html Mischa Moroshko
quelle
5
Auch: stackoverflow.com/questions/446060/…
Radek
14
#wrapper { display: flex; }
icl7126
Mögliches Duplikat von CSS zwei Divs nebeneinander
Alexander

Antworten:

447

Schweben Sie einen oder beide inneren Divs.

Floating one div:

#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 beide schweben lassen, müssen Sie das Wrapper-Div ermutigen, beide schwebenden Kinder zu enthalten, oder es wird denken, dass es leer ist und nicht den Rand um sie legen

Beide Divs schweben lassen:

#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 */
}
clairesuzy
quelle
2
Sie können overflow:autoden #wrapper so einstellen, dass sich die Größe immer noch an die Größe des Inhalts anpasst. (Ohne die Notwendigkeit eines klaren: beide Elemente)
meo
ja in Beispiel eins, wenn das #first länger ist, könnten Sie sicherlich - mit Floats 101 eh;) .. Überlauf auf der #second versteckt vermeidet die Notwendigkeit, einen linken Rand zu berechnen, obwohl ansonsten die Lösungen im Grunde die gleichen sind
clairesuzy
3
Genau! Ich möchte die Marge nicht berechnen. overflow: hiddenmacht hier einen tollen Job! Für mich ist es jedoch immer noch eine Art Magie. Ich dachte, das overflow: hiddensollte den Inhalt verbergen , wenn er nicht in den Container passt. Aber hier ist das Verhalten etwas anders. Könnten Sie das bitte näher erläutern?
Mischa Moroshko
4
Die overflowEigenschaft löscht Floats sowohl vertikal als auch horizontal, weshalb in meinem ersten Beispiel #secondkein linker Rand benötigt wird. Die Überlaufeigenschaft funktioniert, solange der Wert nicht angegeben ist visible. Ich bevorzuge das automatische Ausblenden für solche Fälle Eine Bildlaufleiste wird nicht versehentlich generiert (was automatisch funktioniert). In beiden Fällen wird in einem solchen Szenario kein Inhalt ausgeblendet, da dieser nur ausgeblendet wird, wenn er außerhalb Ihrer 500-Pixel-Breite liegt, aber solange kein Höheninhalt vorhanden ist wickeln Sie innerhalb der Breite wie
gewohnt
1
Überlauf: Auf dem #wrapper versteckt dient dazu, den # ersten Float vertikal zu enthalten, falls er länger als der nicht schwebende #second div wird. Der zweite Überlauf in #second dient dazu, den Inhalt neben dem ersten Float zu enthalten, andernfalls würde er horizontal unter dem ersten Float liegen. Das erweiterte Verhalten der Überlaufeigenschaft wurde irgendwo in CSS2.1 eingeführt. Die Spezifikationen selbst wurden geändert, um Floats ohne Clearing-Element oder Clearfix-Hack zu enthalten. Der technische Begriff lautet, dass bei einer solchen Verwendung ein neues erstellt wird Block Formatierungskontext
clairesuzy
130

Mit zwei Divs,

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

Sie können auch die displayEigenschaft verwenden:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle Beispiel hier .

Wenn div1eine bestimmte Höhe überschritten div2wird , wird neben div1unten platziert. Um dies zu lösen, verwenden Sie vertical-align:top;on div2.

jsFiddle Beispiel hier .

jim_kastrin
quelle
@BSeven Die akzeptierte Antwort verwendet die Eigenschaft float, die von den wichtigsten Browsern früher als die Eigenschaft display unterstützt wurde. Chrome unterstützt Float ab Version 1.0 und Anzeige ab Version 4.0. Vielleicht war die akzeptierte Antwort zum Zeitpunkt des Schreibens abwärtskompatibler.
Jim_Kastrin
5
Diese Lösung hat ein ärgerliches Problem: Da divs erstellt wurden inline, müssen Sie in Ihrem HTML-Code keine Leerzeichen, neuen Zeilen usw. zwischen ihnen lassen. Andernfalls rendern Browser einen Abstand zwischen ihnen. Siehe diese Geige : Sie können es nicht schaffen, beide divs in derselben Zeile zu halten , es sei denn, Sie setzen ihre Tags ohne irgendetwas dazwischen.
Alexander Abakumov
30

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

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

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

James
quelle
17

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;
}

Standardrichtung ist Zeile. Es wird also im #wrapper nebeneinander ausgerichtet. IE9 oder weniger wird jedoch nicht unterstützt

Md. Rafee
quelle
1
Ich kann nicht glauben, wie einfach es zu bedienen ist flex. Vielen Dank!
Sam
16

Hier ist die Lösung:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

Ihre Demo wurde aktualisiert.

http://jsfiddle.net/dqC8t/1/

meo
quelle
Vielen Dank. Wenn ich es weglasse overflow: auto;, funktioniert es immer noch. Können Sie ein Beispiel geben, wo es erforderlich ist?
Mischa Moroshko
Ja sicher: Entfernen Sie den automatischen Überlauf und verlängern Sie den Inhalt von zuerst länger als den Inhalt von zweit. Sie sehen, dass sich die Größe des Containers nur anpasst, wenn Sie den automatischen Überlauf festlegen oder wenn Sie ein Clearing-Element verwenden: jsfiddle. net / dqC8t / 3
meo
OK, ich verstehe, danke! Allerdings hat mir nicht gefallen, margin: 0 0 0 302px;weil es darauf ankommt width: 300px;. Danke trotzdem!!
Mischa Moroshko
Sie brauchen es nicht, wenn Sie i Breite für Ihre zweite div
meo
15

Option 1

Verwenden Sie float:leftfür beide divElemente und legen Sie für beide div-Elemente eine% -Breite mit einer Gesamtbreite von 100% fest.

Verwenden Sie box-sizing: border-box;für die schwebenden div-Elemente. Das Wertrahmenfeld erzwingt das Auffüllen und die Ränder in Breite und Höhe, anstatt sie zu erweitern.

Verwenden Sie clearfix für <div id="wrapper">, um die schwebenden untergeordneten Elemente zu löschen, wodurch die Wrapper-Div-Skalierung auf die richtige Höhe gebracht 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

Verwenden Sie position:absolutefür ein Element und eine feste Breite für das andere Element.

Position hinzufügen: relativ zum <div id="wrapper">Element, damit untergeordnete Elemente dem <div id="wrapper">Element absolut positioniert werden .

#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

Verwenden Sie display:inline-blockfür beide divElemente und legen Sie für beide div-Elemente eine% -Breite mit einer Gesamtbreite von 100% fest.

Und wieder (wie im float:leftBeispiel) box-sizing: border-box;für die div-Elemente verwenden. Das Wertrahmenfeld erzwingt das Auffüllen und die Ränder in die Breite und Höhe, anstatt sie zu erweitern.

HINWEIS: Inline-Block-Elemente können Abstandsprobleme aufweisen, da sie durch Leerzeichen im HTML-Markup beeinflusst werden. Weitere Informationen 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 Option wäre die Verwendung der neuen Anzeigeoption mit dem Namen flex. Beachten Sie jedoch, dass möglicherweise die Browserkompatibilität zum Einsatz kommt:

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

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

Jako Basson
quelle
1
Einverstanden; floatschwimme nicht mein Boot. inline-blockFelsen. (Entschuldigung.)
SteveCinq
7

Versuchen Sie, die folgenden Codeänderungen zu verwenden, um zwei Divs voreinander zu platzieren 

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle-Link

Shailesh
quelle
7

Es ist sehr einfach - man könnte es auf die harte Tour machen

.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%;
}
<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>
Erweitern Sie das Snippet

oder der einfache Weg 

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    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>
Erweitern Sie das Snippet

Es gibt auch wie eine Million andere Wege.
Aber ich würde nur mit dem einfachen Weg. Ich möchte Ihnen auch sagen, dass viele der Antworten hier falsch sind. Aber beide Methoden, die ich gezeigt habe, funktionieren zumindest in HTML 5.

Runningman Studios
quelle
5

Dies ist die richtige CSS3-Antwort. Hoffe, das hilft dir jetzt irgendwie: D Ich empfehle dir wirklich, das Buch zu lesen: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Eigentlich habe ich diese Lösung aus dem Lesen dieses Buches gemacht . : D.

#wrapper{
  display: flex;
  flex-direction: row;
  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>
Erweitern Sie das Snippet

Martin Krajčírovič
quelle
3

  1. Fügen Sie float:left;in beiden Divs eine Eigenschaft hinzu.

  2. display:inline-block;Eigenschaft hinzufügen .

  3. In display:flex;Immobilien in Mutter div.

Freund
quelle
2

Mein Ansatz:

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

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}
sNICkerssss
quelle
0 

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}
<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>
Erweitern Sie das Snippet

Akshit Ahuja
quelle
0

In der Material-Benutzeroberfläche und in react.js können Sie das Raster verwenden

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>
Pedro JR
quelle