Jak umieścić dwa divy obok siebie?

Rozważ następujący kod :

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

Chciałbym, aby dwa div były obok siebie wewnątrz div otoki. W takim przypadku wysokość zielonego div powinna określać wysokość opakowania.

Jak mogę to osiągnąć za pomocą CSS?

Unieś jeden lub oba wewnętrzne divy.

Pływający jeden 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 */
}

lub jeśli umieścisz oba elementy, musisz zachęcić div otoki, aby zawierał oba elementy pływające, albo pomyśli, że jest pusty i nie będzie otaczał ich ramką

Pływające oba div:

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

Posiadanie dwóch div,

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

możesz również skorzystać z displaywłaściwości:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Przykład jsFiddle tutaj .

Jeśli div1przekroczy określoną wysokość, div2zostanie umieszczony obok div1na dole. Aby rozwiązać ten problem, użyj vertical-align:top;na div2.

Przykład jsFiddle tutaj .

Możesz umieszczać elementy obok siebie za pomocą właściwości float CSS:

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

Musisz upewnić się, że div otoki pozwala na przestawianie pod względem szerokości, a marginesy itp. Są ustawione poprawnie.

Spróbuj użyć modelu Flexbox. Pisanie jest łatwe i krótkie.

Live Jsfiddle

CSS:

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

domyślnym kierunkiem jest rząd. Tak więc wyrównuje się obok siebie w #wrapper. Ale nie jest obsługiwany IE9 lub mniej niż te wersje

oto rozwiązanie:

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

Twoje demo zaktualizowane;

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

opcja 1

Użyj float:leftna obu divelementach i ustaw% szerokości dla obu elementów div o łącznej szerokości 100%.

Użyj box-sizing: border-box;na pływających elementach div. Wartość border-box wymusza wypełnienie i obramowanie na szerokość i wysokość zamiast go rozszerzać.

Użyj clearfix na, <div id="wrapper">aby usunąć pływające elementy potomne, które sprawią, że otoki otoki będą skalowane do właściwej wysokości.

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

Opcja 2

Użyj position:absolutena jednym elemencie i stałej szerokości na drugim elemencie.

Dodaj pozycję: względem <div id="wrapper">elementu, aby elementy potomne były absolutnie pozycjonowane względem <div id="wrapper">elementu.

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

Opcja 3

Użyj display:inline-blockna obu divelementach i ustaw% szerokości dla obu elementów div o łącznej szerokości 100%.

I znowu (tak jak w float:leftprzykładzie) użyj box-sizing: border-box;na elementach div. Wartość border-box wymusza wypełnienie i obramowanie na szerokość i wysokość zamiast go rozszerzać.

UWAGA: w elementach bloku wbudowanego mogą występować problemy z odstępami, ponieważ wpływ na to mają spacje w znacznikach HTML. Więcej informacji tutaj: 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/

Ostatnią opcją byłoby użycie nowej opcji wyświetlania o nazwie flex, ale należy pamiętać, że do gry może wejść kompatybilność przeglądarki:

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

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

Spróbuj użyć poniższych zmian kodu, aby umieścić dwa divy przed sobą

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

Łącze JSFiddle

To bardzo proste - możesz to zrobić na własnej skórze

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

lub w prosty sposób

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

Istnieje również milion innych sposobów.
Ale po prostu w prosty sposób. Chciałbym również powiedzieć, że wiele odpowiedzi tutaj jest niepoprawnych, ale oba sposoby, które pokazałem, działają przynajmniej w HTML 5.

To jest właściwa odpowiedź CSS3. Mam nadzieję, że pomoże Ci to jakoś teraz: D Naprawdę polecam przeczytanie książki: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Właściwie to stworzyłem to rozwiązanie, czytając teraz tę książkę . :RE

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

1. Dodaj float:left;właściwość w obu divach.

2. Dodaj display:inline-block;nieruchomość.

3. Dodaj display:flex;właściwość w div div.

Moje podejście:

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

W materiałowym interfejsie użytkownika i reag.js możesz użyć siatki

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