Як розмістити два диви один біля одного?

Розглянемо наступний код :

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

Я хотів би, щоб два діви були поруч один з одним всередині оболонки. У цьому випадку висота зеленого дива повинна визначати висоту обгортки.

Як я міг досягти цього за допомогою CSS?

Пливуть один або обидва внутрішні диви.

Плаваючий один 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 */
}

або якщо ви плаваєте обидва, вам потрібно буде заохочувати обгортковий дів містити обох плаваючих дітей, інакше він подумає, що він порожній, і не ставитиме межу навколо них

Плаваючі обидві діви:

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

Маючи два діви,

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

Ви також можете скористатися displayмайном:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Приклад jsFiddle тут .

Якщо div1перевищує певну висоту, div2буде розміщено поруч div1із дном. Щоб вирішити це, скористайтеся vertical-align:top;далі div2.

Приклад jsFiddle тут .

Ви можете сидіти елементи поруч, використовуючи властивість CSS float:

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

Вам потрібно буде переконатися, що div оболонки дозволяє плаваючий за шириною, а поля тощо встановлені правильно.

Спробуйте скористатися моделлю флешбоксу. Легко і коротко писати.

Наживо Jsfiddle

CSS:

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

за замовчуванням - рядок. Отже, він вирівнює поруч один з одним всередині #wrapper. Але він не підтримується IE9 або менше, ніж ці версії

ось рішення:

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

демо оновлено;

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

Варіант 1

Використовуйте float:leftна обохdivелементи та встановіть% ширини для обох елементів div із комбінованою загальною шириною 100%.

Використовуйте box-sizing: border-box; на плаваючих елементах div. Значення border-box змушує прошивку і облямовує ширину та висоту, а не розширює її.

Використовуйте clearfix on, <div id="wrapper">щоб очистити плаваючі дочірні елементи, які зроблять шкалу поділки на потрібній висоті.

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

Варіант 2

Використовуйте position:absolute на одному елементі та фіксовану ширину на іншому.

Додати позицію: відносно <div id="wrapper">елемента, щоб зробити дочірні елементи абсолютно положенням до <div id="wrapper">елемента.

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

Варіант 3

Використовуйте display:inline-blockобидва divелементи та встановіть% ширини для обох елементів div із комбінованою загальною шириною 100%.

І знову (те саме, як float:leftприклад) використання box-sizing: border-box;на елементах div. Значення border-box змушує прошивку і облямовує ширину та висоту, а не розширює її.

ПРИМІТКА: елементи вбудованого блоку можуть мати проблеми з інтервалом, оскільки на нього впливають пробіли в розмітці HTML. Більше інформації тут: 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/

Остаточним варіантом буде використання нової опції відображення з назвою flex, але зауважте, що сумісність браузера може прийти до гри:

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

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

Спробуйте використати нижче зміни коду, щоб розмістити два діви навпроти одного

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

Посилання JSFiddle

Це дуже просто - ви могли зробити це важким шляхом

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

або простий спосіб

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

Є також, як мільйон інших способів.
Але я б просто простим шляхом. Я також хотів би сказати вам, що багато відповідей тут невірні, але обидва способи, які я показав, принаймні працюють у HTML 5.

Це правильна відповідь CSS3. Сподіваюсь, це допоможе вам якось зараз: D Я дуже рекомендую вам прочитати книгу: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Насправді я прийняв це рішення, читаючи цю книгу зараз . : 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>

1. Додайте float:left;властивість в обох дивах.

2. Додати display:inline-block;власність.

3. Додати display:flex;власність у батьківський div.

Мій підхід:

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

У матеріальному інтерфейсі та react.js ви можете використовувати сітку

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