CSS 响应式布局的 2 列布局

Question

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

我的页面有 2 个部分，其中可以有任意数量的 "info sections" 和一个 "other section." 对于响应式设计，它们必须像这样显示（因此在我的 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 放在 "other 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!

CSS 响应式布局的 2 列布局

CSS 2-column layout for responsive layout

html

css

responsive-design