0

我正在处理当前看起来像这样的水平页面布局：

Div B、C 和 D 具有浮动：左属性，因此所有 DIV 并排对齐，这就是我想要的。

（请记住，滚动页面时右侧会出现更多的 DIV）

+----------------------------------------+
| Div A                                  |
|                                        |
|  +----------+ +----------+ +--------+  |
|  | Div B    | | Div C    | | Div D  |  |
|  |          | |          | |        |  |
|  +----------+ +----------+ |        |  |
|                            |        |  |
|                            |        |  |
|                            +--------+  |
+----------------------------------------+

还有一个问题，如果有足够的空间，我希望 DIV 垂直对齐，所以它看起来像这样：

+---------------------------+
| Div A                     |
|                           |
|  +----------+ +--------+  |
|  | Div B    | | Div D  |  |
|  |          | |        |  |
|  +----------+ |        |  |
|               |        |  |
|  +----------+ |        |  |
|  | Div C    | |        |  |
|  |          | |        |  |
|  +----------+ |        |  |
|               +--------+  |
+---------------------------+

所以我想我正在寻找一种方法来仅应用浮动：如果可能的话，如果没有剩余垂直空间，则将其留给 DIV。

谢谢

4

1 回答 1

1

当这只是您作为示例的 3 个 div 时，您确实有很多简单的方法来做您想做的事。

例如，您可以将 div E 放在放置 div B 和 C 的位置。

或者你可以选择 flexbox（flexbox FTW！）

或者您可以将所有位置设为绝对位置并逐像素设置所有内容。如果你有很多 div 并且你想让它具有响应性，这将是非常复杂的......除非有一个很棒的图书馆为你做这件事......碰巧就是这种情况！

起初你有砖石：http: //masonry.desandro.com/

然后你有同位素：http: //isotope.metafizzy.co/

现在你有了包装：http: //packery.metafizzy.co/

--

都是同一个人写的。第一个是免费的，另一个有许可价格（但如果你想分叉并自己制作，所有代码都在 github 上）

于 2013-09-07T10:18:34.363 回答