基本上,我有一个包含一些 float 元素的内容框:
html
<div class="contentBox">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
CSS
.contentBox {
overflow-x:scroll;
}
.item {
float:left;
}
我希望盒子的宽度扩大,以便让我添加到其中的元素尽可能多地适应,向左浮动(这意味着元素被推到右边)。但相反,由于没有空间,它只会在元素下降之前与页面一样宽。我希望它在页面外继续。
我该怎么做?
我想我需要使用一些 JavaScript,但如果可能的话,我宁愿使用纯 CSS 解决方案。
最佳答案
您可以在带有内联 block 子元素的父容器上使用 white-space: nowrap
:
.contentBox {
overflow-x: scroll;
white-space: nowrap;
}
.item {
display: inline-block;
}
演示:http://jsfiddle.net/vo8202uy/
$('button').click(function() {
$('.contentBox').append('<div class="item">' + ($('.item').length+1) + '</div>');
});
.contentBox {
overflow-x:scroll;
white-space: nowrap;
}
.item {
width: 50px;
background: coral;
margin-right: 5px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentBox">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<button>Add more</button>
关于javascript - 如何设计带有内部 float 的 div 以水平扩展以允许所有内部 float div 适合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27433746/