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

Ответ 1

Поплавьте один или оба внутренних 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 */
}

Ответ 2

Имея два divs,

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

Ответ 3

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

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

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

Ответ 4

вот решение:

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

Ответ 5

Вариант 1

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

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

Используйте clearfix на <div id="wrapper">, чтобы очистить плавающие дочерние элементы, которые сделают масштаб обертки 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 и установите ширину% для обоих элементов 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

Ответ 6

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

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

ссылка JSFiddle

Ответ 7

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

Live Jsfiddle

CSS

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

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

Ответ 8

• Добавить свойство float:left; в обоих div.

• Добавить свойство display:inline-block;.

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

Ответ 9

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