CSS - Сделать divs align горизонтально

Question

У меня есть контейнер div с фиксированной шириной и высотой, с переполнением: скрытый.

Я хочу горизонтальный ряд поплавка: левые divs внутри этого контейнера. Divs, которые поплывут слева, естественно нададут на «линию» ниже, после того как они прочитают правильную границу своего родителя. Это произойдет, даже если высота родителя не должна допускать этого. Вот как это выглядит:

[Wrong] [1] - удалено изображение будка изображение, которое было заменено на объявление

Как бы мне хотелось, чтобы это выглядело:!

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

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

Answer 1

Вы можете поместить внутренний div в контейнер, который является достаточно широким, чтобы удерживать все плавающие div.

#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>

Answer 2

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

#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>

Answer 3

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

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

Примечание position: absolute и overflow: hidden необходимы для того, чтобы получить clip работать.

Answer 4

style="overflow:hidden" для родителей div и style="float: left" для всех детей divs важно сделать divs выровнять по горизонтали для старых браузеров, таких как IE7 и ниже.

Для современных браузеров вы можете использовать style="display: table-cell" для всего ребенка divs, и он визуализируется горизонтально.

Answer 5

Поплавать влево. В Chrome, по крайней мере, вам не нужно иметь обертку, id="container", в примере LucaM.

Answer 6

Поплавок: слева, дисплей: встроенный блок будет не выравнивать элементы по горизонтали, если они превышают ширину контейнера.

Важно отметить, что контейнер не должен завернуть, если элементы должны отображаться горизонтально: white-space: nowrap

Answer 7

Теперь вы можете использовать CSS Flexbox для выравнивания дивы по горизонтали и по вертикали, если вам нужно.общая формула выглядит следующим образом:

parent-div { 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: center ; /* for horizontal aligning of child divs */ 
    align-items : center ; /* for vertical aligning */ 
    } 
child-div { 
    width: /* yoursize for each div */ ; 
}