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

#html #inline

#HTML #встроенные

Вопрос:

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

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

Ответ №1:

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

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

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

Ответ №2:

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

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

1. И чтобы начать следующий встроенный элемент с новой строки, добавьте style=»очистить: оба» к этому элементу.

2. OP сказал: «Мне нужен другой div только для перехода к следующей строке, если там недостаточно места», поэтому в этом случае очистка не должна использоваться. Однако это хороший совет для других ситуаций.

3. Извините за неясность; я имел в виду элемент, отличный от рассматриваемого div. Вероятно, у OP больше разметки, чем у них. 😉

4. Не будет ли inline-block лучшим решением? Элементы с плавающей точкой, как правило, довольно беспорядочные; очистка контейнеров, предотвращение проблем с другими элементами с плавающей точкой, обеспечение правильного обтекания их текстом…

5. Вот подробное сравнение двух методов: ternstyle.us/blog/float-vs-inline-block Для каждого есть свои плюсы и минусы. Для меня наиболее убедительным аргументом является то, что IE 7 и более ранние версии не обрабатывают встроенный блок надлежащим образом. Мне часто бывает легче справиться с последствиями плавающего ввода, чем создавать альтернативные стили для IE 7 и более ранних версий.

Ответ №3:

Используйте float ‘s и margin ‘s; таким образом, когда нет свободного места, вы можете просто поместить 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>

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

Демонстрация здесь:http://jsfiddle.net/kuroir/UupbG/1 /

Ответ №4:

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

Ответ №5:

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