CSS:如何制作这种布局？

Question

|---| |---|
|   | |   |
|---| |   |
      |   |
      |   |
      |   |
      |---|

我会让左边的 div float:left，但它会显示如下:

|---| |---|
|   | |   |
|---| |   |
|   |
|   |
|   |
|---|

右列将环绕 float 元素。这不是我想要的。

一种可能的解决方案是使用 Bootstrap 的网格系统。但我希望 left 元素具有其原始宽度(例如 H1 标记的宽度)，而不是像 spanX 这样的网格给出的宽度>

另一种解决方案是设置右边元素的margin-left，将其设置为固定值。但是，左侧元素的宽度不应该是给定的值，它应该是灵活的。

Answer 1

您可以将两列包含在 div 中并将它们都 float 到左侧。