Подскажите, пожалуйста, как можно расположить несколько div-ов в одну строку таким образом, чтобы даже в том случае, если их общая ширина превышала ширину контейнера, они всё равно не переносились на новую строку, а просто происходила обрезка не помещающихся div-ов.
4 ответа
Есть много вариантов, в зависимости от того, как нужно отображать сами блоки. Один с вариантов:
.container{overflow:hidden;width:200px}
.box{white-space:nowrap}
.box div{width:90px;display:inline-block;border:1px solid black}
<div class="container">
<div class="box">
<div>content1</div>
<div>content2</div>
<div>content3</div>
</div>
</div>
.
<div style="overflow: hidden;">
<div style="width: 1000%;">
<div style="float: left; width: 100px; height: 100px;">content</div>
<div style="float: left; width: 100px; height: 100px;">content</div>
<div style="float: left; width: 100px; height: 100px;">content++</div>
</div>
</div>
-
2
На мой взгляд, самое нормальное решение:
<div style="overflow: hidden;">
<div style="width: 1000%;">
<div style="float: left; width: 100px; height: 100px;">content</div>
<div style="float: left; width: 100px; height: 100px;">content</div>
<div style="float: left; width: 100px; height: 100px;">content++</div>
</div>
</div>
Я использовал у себя эту часть:
<div style="width: 1000%;">
<div style="float: left; width: 100px; height: 100px;">content</div>
<div style="float: left; width: 100px; height: 100px;">content</div>
<div style="float: left; width: 100px; height: 100px;">content++</div>
</div>
и все заработало.