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

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

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

Answer 2

Dies ist die richtige CSS3-Antwort. Hoffentlich hilft dir das jetzt irgendwie weiter :D Ich empfehle dir wirklich, das Buch zu lesen: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Tatsächlich habe ich diese Lösung jetzt nach der Lektüre dieses Buches gefunden :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>

Answer 3

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 noch eine Million anderer Möglichkeiten.
Aber ich würde einfach den einfachen Weg wählen. Ich möchte Ihnen auch sagen, dass viele der Antworten hier falsch sind Aber beide Wege, die ich gezeigt habe, funktionieren zumindest in HTML 5.

Answer 4

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

Answer 5

1. hinzufügen float:left; Eigenschaft in beiden Divs.

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

3. hinzufügen display:flex; Eigenschaft im übergeordneten Div.