当它的孩子彼此并排倾斜时，让div清楚吗？

Question

我正在制作一个响应式网站。我有3个div（.block），我需要水平地坐在一起。

当屏幕足够宽时，很容易实现。然而，当我使浏览器更窄时，第三个div（3）包装到下一行，但我想要的是所有div.blocks换行到下一行。

这可以在没有媒体查询的情况下完成吗？如果元素的宽度是动态的，我想要CSS继续工作。

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

<div class="other-block">
  Other block
</div>

<div class="cont1">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>
.cont {
  width: 25%;
}
.block {
  float: left;
  border: 1px solid green;
  width: 70px;
  height: 70px;
}
.other-block {
  height: 70px;
  width: 300px;
  border: 1px solid red;
  float: left;
}

Answer 1

浮动.cont1怎么样：

.cont1 {
  float:left;
}

Codepen demo

Answer 2

一个解决方案就是：

http://jsfiddle.net/ZFacP/1/

.cont1 {
  width: 210px;
  float:left;
}
.block {
  float: left;
  border: 1px solid green;
  width: 70px;
  height: 70px;
    box-sizing:border-box;
}
.other-block {
  height: 70px;
  width: 300px;
  border: 1px solid red;
  float: left;
}

如果您想在.cont1中使用25％，请以百分比形式制作.block div：

http://jsfiddle.net/ZFacP/2/

.cont1 {
  width: 25%;
  float:left;
}
.block {
  float: left;
  border: 1px solid green;
  width: 33.333%;
  height: 70px;
    box-sizing:border-box;
}