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>

如果它比容器宽，则清除浮子

1 个答案: