web-dev-qa-db-de.com

Wie platziere ich zwei Divs nebeneinander?

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>

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

Wie kann ich das via CSS erreichen?

299
Misha Moroshko

Float einen oder beide inneren Divs.

Floating eine 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, müssen Sie den Wrapperdiv dazu ermutigen, beide floateten unterzubringen, oder er denkt, dass er leer ist und nicht um die Grenze gelegt wird

Floating beider Divs:

#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 */
}
382
clairesuzy

Mit zwei divs,

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

sie können auch die display-Eigenschaft verwenden:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle Beispiel hier .

Wenn div1 eine bestimmte Höhe überschreitet, wird div2 unten neben div1 platziert. Um dies zu lösen, verwenden Sie vertical-align:top; für div2.

jsFiddle Beispiel hier .

102
jim_kastrin

Sie können Elemente nebeneinander sitzen, indem Sie die CSS-Eigenschaft float verwenden:

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

Sie müssen sicherstellen, dass der Wrapper div das Floating in Bezug auf Breite und Ränder usw. zulässt.

28
James

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*/
}

deine Demo aktualisiert;

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

16
meo

Option 1

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

Verwenden Sie box-sizing: border-box; für die schwebenden div-Elemente. Der Wert border-box zwingt die Auffüllung und die Ränder in die Breite und Höhe, anstatt sie zu erweitern.

Verwenden Sie clearfix für den <div id="wrapper">, um die schwebenden untergeordneten Elemente zu löschen, wodurch die div-Skala des Wrappers 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:absolute für ein Element und eine feste Breite für das andere Element.

Position hinzufügen: relativ zum <div id="wrapper">-Element, um untergeordnete Elemente absolut zum <div id="wrapper">-Element zu positionieren.

#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-block für beide div-Elemente und legen Sie eine% Breite für beide div-Elemente mit einer kombinierten Gesamtbreite von 100% fest.

Und wieder (wie im Beispiel float:left) verwenden Sie box-sizing: border-box; für die div-Elemente. Der Wert border-box zwingt die Auffüllung und die Ränder in die Breite und Höhe, anstatt sie zu erweitern.

HINWEIS: Inline-Block-Elemente können Abstandsprobleme haben, 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 flex. Beachten Sie jedoch, dass möglicherweise Browser-Kompatibilität auftritt:

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

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

14
Jako Basson

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, es wird jedoch nicht IE9 oder weniger als diese Versionen unterstützt

13
Md. Rafee

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

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

JSFiddle-Link

6
Shailesh
  1. Fügen Sie in beiden divs die float:left;-Eigenschaft hinzu.

  2. Fügen Sie die display:inline-block;-Eigenschaft hinzu. 

  3. Fügen Sie die display:flex;-Eigenschaft im übergeordneten div hinzu.

3
Friend

Es ist sehr einfach - Sie könnten 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>

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>

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

1

#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>

0
Akshit Ahuja

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 machte diese Lösung aus dem Lesen dieses Buches jetzt. : 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>