html - 用于响应式布局的 CSS 2 列布局

Question

我确信在某个地方有这个问题的答案，但我已经四处寻找了一段时间，我一定没有在搜索正确的术语。这实际上是两个问题，但它们可能是相关的。

我的页面有 2 个部分，其中可以有任意数量的“信息部分”和一个“其他部分”。对于响应式设计，它们必须像这样显示(因此在我的 HTML 中相应地排序):

|info div |
-----------
|info div |
-----------
|info div |
-----------
|other div|

但对于我的全尺寸网站，我想要这样的东西，其中信息 div 位于右侧，直到另一个 div 的末尾，然后占据 100% 的宽度:

| other div            |  info div  |
| (other div content)  |  (content) |
|                      |  info div  |
|  (end of content)    |  (content) |
-----------------------             |
|<------info div (content) -------->|

我可以使用 float: left for the div 来实现这一点，但如果不将信息 DIV 放在“其他 div”之后就不行了。此外，我想换行整个部分而不是行本身，以避免出现这样的情况:

| other div            |  info div  |
| (other div content)  |  (content) |
|                      |  info div  |
|  (end of content)    |  (content) |
-----------------------   info div  |
|<---------------(content) -------->|

感谢您的帮助，如果需要，我可以提供更多详细信息或示例。这是演示我的问题的网站上的一个页面:

http://collections.centerofthewest.org/treasures/view/cap_sioux_northern_plains_plastic_billed_beads_seed_nylon_geometr

1000px 左右看起来不错，除了我希望将整个“ block ”推到下一行而不是单行。在 1000 像素以下，您会看到内容堆叠在一起，但不是我想要的顺序(相关文章和虚拟画廊应该在上方)。

谢谢。

Answer 1

你试过bootstrap库了吗？他们有一个 12 列的网格系统，可以满足您的需求。 Here's a link!