Question

css布局：div横排显示，如果太长则出现滚动条。

<div style="overflow:auto;width:100%">
<div style="width:80px;height:80px;background:yellow;float:left;"></div>
<div style="width:80px;height:80px;background:pink;float:left"></div>
<div style="width:80px;height:80px;background:blue;float:left"></div>
<div style="width:80px;height:80px;background:red;float:left"></div>
</div>

如果浏览器宽度小于320px时div会换行，而我希望div还在同一行显示，并出现滚动条。

该怎样写呢？

Answer 1

你这代码，本身就问题，，

<div style="overflow:auto;width:100%">是什么情况下出现滚动条呢？

就是在这个div里的元素宽度超出了100%后才会出现

那你的元素又用了float:left，左浮动，右浮动是什么，，就是所有用了的元素，向左浮动靠拢，它虽然是在一行，但是只是看起来在一行而已，其实因为用了float，，，浮动浮动，意思很明显，已经浮起来了，不在行内的，所以会一直向左浮动，，即使容器再小，它也是继续向左浮，，看起来就像是换了行一样。

<div style="height:400px; width:480px;overflow-x:auto">
<div style="width:1200px;height:380px;background:#f00;"></div>
</div>

Answer 2

overflow-x:auto;