我有一个 fiddle 来演示我要解决的问题:
http://jsfiddle.net/JordashTalon/DgP7J/11/
正如您在第一行中看到的那样,第三列向右对齐(因为最左边的列比紧靠它右边的列高)。
我知道我是否做了 clear: both;在第二列之后让最后一列一直向左浮动,但由于我正在尝试进行更具响应性的设计,所以最好是我可以在没有清除的情况下做到这一点(因为如果容器变得足够大我会希望该列与其余列齐平而不是清除)。
有谁知道如何解决这个问题?我希望这是有道理的。
最佳答案
您可以在这里找到解决方案: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>
关于css - 如果 float 比容器宽,则清除 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12879006/