CSS - Заставьте отделения выровняться горизонтально
У меня есть контейнерное отделение с фиксированным width и height, с overflow: hidden.
Я хочу горизонтальную строку плавания: оставленные отделения в этом контейнере. Отделения, которые пускаются в ход оставленные, естественно продвинут на 'строку' ниже после того, как они считают право, связанное их родителя. Это произойдет даже если height из родителя не должен позволять это. Это - то, как это смотрит:
! [Неправильно] [1] - удаленное изображение лачуги изображения, которое было заменено объявлением
Как я хотел бы, чтобы это посмотрело:
! [Право] [2] - удаленное изображение лачуги изображения, которое было заменено объявлением
Примечание: эффект, который я хочу, может быть достигнут при помощи встроенных элементов и white-space: no-wrap (именно так я сделал это в показанном изображении). Это, однако, бесполезно мне (по причинам, слишком долгим для объяснения здесь), поскольку дочерние отделения должны быть пущенными в ход элементами блочного уровня.
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> можно использовать clip свойство:
#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}
отмечают position: absolute и overflow: hidden необходимый, чтобы заставить clip работать.
Это кажется близко к тому, что Вы хотите:
#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>