0

我有一个 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 上都留下... 2 列将彼此堆叠在一起，创建 2x1x1 而不是 2x2 的布局。

此外，如果我只清除：在 .c3 上的左侧，它们大多会正确错开，除了 c3 无法清除：对于 c4 的右侧。

这就是结果。http://jsfiddle.net/hfG98/

任何想法，我怎样才能让 .c3 和 .c4 直接在 .c1 和 .c2 下发光？

提前感谢您的帮助！

4

1 回答 1

0

CSS 语法有时真的很傻。看看 .c3 后面的这个小逗号

.c3, {

我认为您因此而失去了一些时间；）

另一件事：你为什么不在你的项目中使用砖石之类的东西。这是一个类似砌体的插件列表。Masonry 确实是一个很棒的插件并且可以免费使用。

于 2013-09-09T18:32:17.923 回答