Question

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

我将左侧div float:left，但它会显示如下：

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

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

一种可能的解决方案是使用Bootstrap的网格系统。但我希望左侧元素具有原始宽度（例如H1标记的宽度），而不是像spanX

那样从网格中给出的宽度

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

Answer 1

尝试左侧部分为float：left＆amp;右边的部分为浮动：右边。可能这会帮助你。

Example:
.leftSection {
    float: left;
    width: 50%;
}
.rightSection {
    float: right;
    width: 50%;
}

或者选择这个：

<div style="float:left">
  <div style="float:left">
    <p>Lorem ipsum</p>
  </div>
  <div style="float:right">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
</div>
<div style="float:right">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

Answer 2

您可以将两个列都包含在div中，并将它们都浮动到左侧。

Answer 3

<div class="main-content">
    <div class="your-problem float-left">
        <div class="tiny-small-floating-left float-left">
        </div>
        <div class="float-right">
        </div>
    </div>
    <div class="other-elements-to-right float-right">
    </div>
</div>

我只是试图展示一些浮动的东西。希望，这会有所帮助。

CSS：如何制作这种布局？

3 个答案: