我有两个带有 float:left 属性和一些宽度的 div。它们被包裹在一个具有 overflow: hidden 属性的容器中。
当我将浏览器的大小更改为在水平方向上变小时,当窗口的宽度太窄而无法并排显示两个 div 时,我希望出现一个水平滚动条。但实际情况是,第一个 div 下面的 div 正在清除。
我怎样才能让 div 在窗口太小时不会下降,而是始终与第一个 div 保持在同一行,并且会出现水平滚动条?
这是我的 html:
<div class="col-container">
<div class="col col-1">
Content 1
</div>
<div class="col col-2">
Content 2
</div>
<div class="col col-3">
</div>
</div>
这是我的 CSS:
.col-container{
overflow: hidden;
}
.col {
float: left;
}
.col-1{
width: 30%;
margin-right: 30px;
}
.col-2{
background-color: blue;
}
和here是这个 html 和 css 的 fiddle 。
最佳答案
为确保两列不清晰,您必须为其容器设置最小宽度:
.col-container{
overflow: hidden;
min-width: 150px;
}
这是带有上述更新的 jsfiddle:
https://jsfiddle.net/3s963o9o/2/
另一种选择是不使用float
,而是将结构更改为flexbox。
关于html - 为什么要清除div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41154845/