我有一个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上都清除：left，则2列将彼此堆叠在一起，从而创建2x1x1而不是2x2的布局。
另外，如果我只清除.c3上的：left，它们通常会错开，除非c3无法清除：c4的right。
这就是结果。 http://jsfiddle.net/hfG98/
任何想法，我怎么能让.c3和.c4在.c1和.c2下直接下车？
感谢您的任何帮助！
最佳答案
CSS语法有时确实很愚蠢。看看.c3之后的这个小小的逗号
.c3, {
我认为你因此而迷失了一段时间;）
另一件事：为什么不为项目使用诸如masonry之类的东西。这是类似于插件的砌体。石工确实是一个很棒的插件，可以免费使用。
关于css - 4列自适应问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18689360/