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

Question

我有一个 fiddle 来演示我要解决的问题:

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

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

我知道我是否做了 clear: both;在第二列之后让最后一列一直向左浮动，但由于我正在尝试进行更具响应性的设计，所以最好是我可以在没有清除的情况下做到这一点(因为如果容器变得足够大我会希望该列与其余列齐平而不是清除)。

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

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>