html - 当容器的内容不能放在一行时，让容器 div 清晰？

Question

我有一个流式布局。当布局足够宽时，一些 div(.one 和 .two)可以全部水平排列在一条线上。

当布局最终被挤压时，右侧 float 的 div (.two) 最终会出现在多行上。有没有一种方法(没有基于宽度的媒体查询)让左侧 float 的 div 在不能全部排成一行时清楚地显示在他们自己的行上。我想我需要清楚 .cont2。

下面是我的代码和我试图实现的图像。

http://codepen.io/anon/pen/JcDlh

<div class="cont">

 <div class="one">
 </div>

 <div class="cont2">
   <div class="two"></div>
   <div class="two"></div>
   <div class="two"></div>
 </div>

</div>

.cont {
  background: blue;
  width: 40%;
  margin: auto;
  overflow: auto;
}
.one {
  background: red;
  height: 100px;
  width: 300px;
  float: left;
}
.two {
  float: right;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  background: white
}

Answer 1

你可以试试:

.cont2 {
  float: left;
  overflow: auto;
}

参见示例:http://codepen.io/anon/pen/kczux