我有一个4列布局。 ID = “COL4” 每列设置为25％宽度显示内联块并向左浮动。
如果我将它保留下来，它会变得很敏感。但是，我有一个媒体查询，一旦宽度达到最大宽度：700px。我想要一个2列布局。所以我通过简单地将＃col4的宽度从25％增加到50％来实现这一点，这自然会迫使2列向右下降到前两列之下。
#col4 {
display: inline-block;
float: left;
width: 25%;
}
进入
@media only screen and (max-width:700px)
{
#col4 {
display: inline-block;
float: left;
width: 50%;
}
.c3, {
clear: right;
}
}
如果所有4列的高度相同，则没有问题。但是在我的情况下，4列中的任何一列都可能是不可预测的高度，当4列宽的布局变成2x2宽的布局时，列奇怪地错开。
我认为我必须明确：留在.c3上，可能还有.c4但是其他问题出现了。
如果我清除：在.c3和.c4两个上面......两列将叠加在彼此顶部，创建一个2x1x1而不是2x2的布局。
另外，如果我只清楚：留在.c3上他们大多错开正确，除了c3无法清除：对c4。
这是结果。 http://jsfiddle.net/hfG98/
任何想法，我怎么能让.c3和.c4直接在.c1和.c2下点亮？
提前感谢您的帮助！