css - 如果浮动比容器宽，则清除浮动

Question

我有一个小提琴来演示我要解决的问题：

http://jsfiddle.net/JordashTalon/DgP7J/11/

正如您在第一行中看到的那样，第三列向右对齐（因为最左边的列比它右边的列高）。

我知道我是否清楚：两者；在第二列之后让最后一列一直浮动到左侧，但是由于我正在尝试进行更具响应性的设计，所以如果我可以在没有清除的情况下完成它会是最好的（因为如果容器变得足够大，我会希望柱子与其他柱子齐平而不是清除）。

有谁知道如何解决这个问题？我希望这是有道理的。

Answer 1

您可以在这里找到解决方案：http: //blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

<style>
.column {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 250px;
}

<div class="column">
    <div>
        <h4>This is awesome</h4>
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
        alt="lobster" width="75" height="75"/>
    </div>