Question

我有两个带有float的div：left属性和一些宽度。它们被包装在一个容器中，该容器具有溢出：隐藏属性。

当我将浏览器的大小在水平方向上更小时，我希望当窗口的宽度太窄而不能并排显示两个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的小提琴。

Answer 1

要确保两列不清除，您必须为其容器设置最小宽度：

.col-container{
    overflow: hidden;
    min-width: 150px;
}

以下是您的jsfiddle以上更新：
https://jsfiddle.net/3s963o9o/2/

另一个选择是不使用float，而是将结构更改为flexbox。

Answer 2

使用flexbox代替

.col-container {
  display: flex
}
.col {
  flex: 1;
}
.col-1 {
  flex: 0 30%;
  margin-right: 30px;
  background: red;
}
.col-2 {
  background-color: blue;
}

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

为什么div清算？

2 个答案: