Как ограничить DIV, чтобы быть в одной строке

Question

У меня есть три DIV:

<div style="float:left;" id="a"> a </div>
<div style="float:left;" id="b"> b </div>
<div style="float:left;" id="c"> c </div>

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

Как ограничить их нахождение в одной строке, даже если их больше в DIV. В этом случае горизонтальная полоса прокрутки будет использоваться для просмотра всего контента.

Спасибо

Answer 1

Вам нужно обернуть свои div в родительский div и установить на нем ' пробел: nowrap '.Кроме того, установите « display: inline-block » для того, чтобы ваши div-ы получали желаемый эффект.

Попробуйте что-то вроде этого,

.parent {
  white-space: nowrap;       
}

.child {
  width: 200px;
  height: 200px;
  display:inline-block;       
}

<div class="parent">
  <div  class="child" id="a"> a </div>
  <div  class="child" id="b"> b </div>
  <div  class="child" id="c"> c </div>
</div>

Answer 2

Поместите их в родительский элемент с overflow-x .

Answer 3

Попробуйте это:

<div style="display: inline-block;">a</div>
<div style="display: inline-block;">b</div>
<div style="display: inline-block;">c</div>

Answer 4

Пожалуйста, определите высоту объекта.