Как разместить два div рядом друг с другом?

370

Рассмотрим следующий код :

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

Я хотел бы, чтобы два div были рядом друг с другом внутри div-оболочки. В этом случае высота зеленого div должна определять высоту оболочки.

Как я могу добиться этого с помощью CSS?

Миша Морошко
источник
15
#wrapper { display: flex; }
icl7126
Возможные дубликаты CSS двух div рядом друг с другом
Александр

Ответы:

447

Плавать один или оба внутренних div.

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

или если вы используете оба плавающих объекта, вам нужно будет поощрять div-обертку содержать обоих всплывающих дочерних элементов, или он будет думать, что он пуст, и не будет помещать границу вокруг них.

Плавающие оба 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 */
}
clairesuzy
источник
2
Вы можете установить overflow:autoна #wrapper, чтобы размер по-прежнему соответствовал размеру содержимого. (Без необходимости четкого: как элемент)
MeO
да, в первом примере, если #first длиннее, вы, безусловно, могли бы - содержащий плавающие числа 101 эх;) .. переполнение, скрытое в #second, избавляет от необходимости вычислять левое поле, хотя в остальном решения в основном одинаковы
clairesuzy,
3
Точно! Я не хочу рассчитывать маржу. overflow: hiddenделает большую работу здесь! Тем не менее, это все еще отчасти волшебство для меня. Я думал, что это overflow: hiddenдолжно скрыть контент, если он не помещается в его контейнер. Но здесь поведение немного отличается. Не могли бы вы уточнить это, пожалуйста?
Миша Морошко
4
overflowсвойство очистит плавает как по вертикали и горизонтали , которая , почему в моем первом примере, #secondне нужен левый край, свойство Переполнение работает, пока это значение не visible.. Я предпочитаю скрытый в авто для тех , кто только в сценариях так полоса прокрутки не генерируется случайно (что будет делать авто) .. в любом случае контент не будет скрыт в сценарии, подобном этому, поскольку он будет скрыт, только если он выходит за пределы вашей ширины 500 пикселей, но до тех пор, пока не будет содержимого высоты, будет обернуть в пределах ширины, как обычно .. не прячется;)
clairesuzy
1
Переполнение: скрытый в #wrapper служит для вертикального размещения #first с плавающей точкой, если он будет длиннее, чем non-floated #second div. второе переполнение в #second служит для хранения содержимого рядом с первым плаванием, в противном случае оно будет располагаться горизонтально под первым плаванием. Расширенное поведение свойства overflow было введено где-то в CSS2.1, сами спецификации изменились в ответ на способ содержать плавающие элементы без очищающего элемента или взлома clearfix, его технический термин заключается в том, что при таком использовании он создает новый блок форматирования контекста
clairesuzy
130

Имея два div,

<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 здесь .

jim_kastrin
источник
@BSeven принятый ответ использует свойство float, которое поддерживалось ранее, чем свойство display основными браузерами. Chrome поддерживает float с v1.0 и дисплей с v4.0. Возможно, принятый ответ был более обратно-совместимым во время его написания.
jim_kastrin
5
Это решение имеет одну досадную проблему: так как divs сделаны, inlineвы не должны оставлять пробелы, новые строки и т.д. между ними в своем HTML. В противном случае браузеры будут отображать пространство между ними. Посмотрите на эту скрипку : вам не удастся удержать оба divэлемента в одной строке, если вы не поместите их теги без чего-либо промежуточного.
Александр Абакумов
30

Вы можете размещать элементы рядом друг с другом, используя свойство float CSS:

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

Вам нужно убедиться, что div-обертка допускает плавающие значения по ширине, а поля и т. Д. Установлены правильно.

Джеймс
источник
17

Попробуйте использовать модель flexbox. Это легко и кратко написать.

Live Jsfiddle

CSS:

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

направление по умолчанию - строка. Таким образом, он выравнивается рядом друг с другом внутри #wrapper. Но не поддерживается IE9 или меньше, чем те версии

Md. Rafee
источник
1
Я не могу поверить, как легко использовать flex. Спасибо!
Сэм
16

вот решение:

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

MeO
источник
Спасибо. Если я опущу overflow: auto;это все еще работает. Не могли бы вы привести пример, где это требуется?
Миша Морошко
да, конечно: удалите auto переполнения и сделайте содержимое first длиннее содержимого second, вы хорошо увидите, что размер контейнера изменяется только при установке для него параметра overflow auto или при использовании очищающего
MeO
Хорошо, я вижу, спасибо! Тем не менее, мне не понравилось, margin: 0 0 0 302px;потому что это зависит от width: 300px;. Но все равно спасибо!!
Миша Морошко
вам это не нужно, если вы укажете ширину для вашего второго div
meo
15

Опция 1

Используйте float:leftоба divэлемента и установите% width для обоих элементов div с общей общей шириной 100%.

Используйте box-sizing: border-box;на плавающих элементах div. Значение border-box заставляет отступы и границы в ширину и высоту, а не расширяет их.

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

.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элемента и установите% width для обоих элементов div с общей общей шириной 100%.

И снова (так же, как в float:leftпримере) использовать box-sizing: border-box;элементы div. Значение border-box заставляет отступы и границы в ширину и высоту, а не расширяет их.

ПРИМЕЧАНИЕ: элементы inline-block могут иметь проблемы с пробелами, поскольку на них влияют пробелы в разметке 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

Яко Бассон
источник
1
Согласовано; floatне плавай мою лодку. inline-blockгорные породы. (Извините.)
SteveCinq
7

Попробуйте использовать приведенные ниже изменения кода, чтобы поместить два элемента div друг перед другом.

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

Ссылка JSFiddle

Shailesh
источник
7

Это очень легко - вы можете сделать это трудным путем

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

Бегущий Студии
источник
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>

Мартин Крайчирович
источник
3
  1. Добавить float:left;свойство в обоих div.

  2. Добавить display:inline-block;недвижимость.

  3. Добавить display:flex;свойство в родительском div.

друг
источник
2

Мой подход:

<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
источник
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>

Акшит Ахуджа
источник
0

В пользовательском интерфейсе материала и response.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>
Педро JR
источник