Горизонтальная полоса прокрутки не отображается

Question

Обновление: я использовал overflow-x (просто мой вопрос был неправильным)

Горизонтальная полоса прокрутки должна отображаться в этом случае, но не

<div style="overflow-x:scroll; width:400px">
  <div style="float:left; width:300px">abc </div>
  <div style="float:left; width:300px">abc </div>
  <div style="clear:both"></div>
</div>

Как сделатьв этом случае я использую переполнение div?

Answer 1

Чтобы ответить на ваш вопрос, ваши дочерние элементы не вызовут переполнение родительского элемента. Ваш текущий дизайн не вызовет переполнение родительского элемента, поскольку оба потомка установлены с float:left

Кажется, вы предполагаете, что дети будут сложены горизонтально; выключите float и поместите их в таблицу шириной 600px в соседних ячейках и посмотрите, что это делает.

Также обратите внимание, что свойство переполнения CSS сильно зависит от браузера. Некоторые браузеры используют overflow:scroll, а некоторые - overflow:auto.

Answer 2

Если вы хотите горизонтальную полосу прокрутки, вам нужно использовать overflow-x: scroll;.Также внутренние дочерние элементы div должны быть шире родительского элемента div для работы полос прокрутки.Поэтому ваш код будет выглядеть следующим образом:

<div style="overflow-x:scroll; width:400px">
  <div style="float:left; width:450px">abc </div>
  <div style="float:left; width:450px">abc </div>
  <div style="clear:both"></div>
</div>