CSS - Заставьте отделения выровняться горизонтально

У меня есть контейнерное отделение с фиксированным width и height, с overflow: hidden.

Я хочу горизонтальную строку плавания: оставленные отделения в этом контейнере. Отделения, которые пускаются в ход оставленные, естественно продвинут на 'строку' ниже после того, как они считают право, связанное их родителя. Это произойдет даже если height из родителя не должен позволять это. Это - то, как это смотрит:

! [Неправильно] [1] - удаленное изображение лачуги изображения, которое было заменено объявлением

Как я хотел бы, чтобы это посмотрело:

! [Право] [2] - удаленное изображение лачуги изображения, которое было заменено объявлением

Примечание: эффект, который я хочу, может быть достигнут при помощи встроенных элементов и white-space: no-wrap (именно так я сделал это в показанном изображении). Это, однако, бесполезно мне (по причинам, слишком долгим для объяснения здесь), поскольку дочерние отделения должны быть пущенными в ход элементами блочного уровня.

81
задан Priyanga 14 October 2019 в 11:47
поделиться

3 ответа

Можно поместить внутреннее отделение в контейнер, который достаточно широк для содержания всех пущенных в ход отделений

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
94
ответ дан Nhan 24 November 2019 в 09:39
поделиться

можно использовать clip свойство:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

отмечают position: absolute и overflow: hidden необходимый, чтобы заставить clip работать.

5
ответ дан thanksd 24 November 2019 в 09:39
поделиться

Это кажется близко к тому, что Вы хотите:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}
<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
5
ответ дан Nhan 24 November 2019 в 09:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: