Встроенные элементы div

Question

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

Кто-нибудь знает, как это сделать?

Answer 1

Установить стиль отображения CSS на display:inline-block;.

Это позволяет элементу сохранять функциональность, похожую на блок, и в то же время позволяет отображать его в строке. Это дом на полпути между двумя.

(но учтите, что существуют некоторые проблемы совместимости со старыми версиями IE)

Answer 2

Div - это элементы уровня блока, поэтому по умолчанию они всегда будут занимать всю строку.Способ изменить это состоит в том, чтобы плавать div:

<div style="float: left"></div>

Answer 3

Используйте float и margin;таким образом, когда нет места, вы можете просто поместить overflow:hidden в container, чтобы скрыть остальную часть div, вместо того, чтобы перейти к следующей строке.

CSS

.container {
  width:500px;
  background:#DADADA;
  overflow:hidden; /* also used as a clearfix */
}

.content {
  float:left;
  background:green;
  width:350px;
}
.sidebar {
  width:155px; /* Intentionaly has more width */ 
  margin-left:350px; /* Width of the content */
  background:lime;
}

HTML

<div class="container">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

В этой демонстрации вы можете увидеть: float, margin + float, display: inline-block.

Демо здесь: http://jsfiddle.net/kuroir/UupbG/1/

Answer 4

Убедитесь, что у вас фиксированная ширина до div s

Answer 5

Вам необходимо использовать float правило CSS.Просто используйте некоторый класс или идентификатор и установите float в left или right.