CSS | Сделайте div плавающим вправо и добавьте полосу прокрутки к родительскому элементу

У меня есть родительский контейнер Div с 5 div внутри. Родительский div имеет ширину 960 пикселей и высоту 320 пикселей. Внутренние элементы плавают влево и имеют заданную ширину.

Недостаточно ширины / места для 5 элементов, чтобы поместиться внутри родительского div шириной 960, поэтому, естественно, последний div перемещается вниз.

Есть ли способ сдвинуть его вправо и добавить полосу прокрутки для горизонтальной прокрутки?

http://puu.sh/qiBKI/3f1d4c944a.png


html css overflow floating
person Eclipse    schedule 29.07.2016    source источник
comment
добавьте свой код пожалуйста   -  person jakob    schedule 29.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете комбинировать white-space: nowrap и display: inline-block, чтобы предотвратить перенос элементов. Добавьте overflow: scroll и получите полосу прокрутки родителя. Вот пример:

.parent {
  overflow: scroll;
  background-color: lightblue;
  white-space: nowrap;
 }

.some-child {
  width: 200px;
  display: inline-block;
 }
<div class="parent">
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
</div>

.parent {
  width: 100%;
  overflow: scroll;
}
person MattDiMu    schedule 29.07.2016