在 html 中浮动 3 个 div

Question

我是 html 编程的菜鸟，但基本上我想要 3 个 div 看起来像这样的版本：

|        |        |
|    1   |    2   |
|        |        |
-------------------
|                 |
|        3        |
|                 |

现在，我正在使用 bootstrap，并且我可以使用 div 类将多个列并排放置。但这只有在我想做专栏时才有效。例如：

 <div class=col-lg-6>

此外，我不能使用固定尺寸，因为 div2 可能比 div1 大，反之亦然，具体取决于我获得的信息。对我如何做到这一点有什么建议吗？

Answer 1

如果您不想使用 javascript，您可以将那些 div 的宽度设置为 30%、70% 并将它们的显示属性设置为 'inline-block'，设置环绕div的白色-space属性为'nowrap'。之后，添加一个 br 标签将把第三个 div 降下来。 ..或者你可以只使用 table 我从来不建议的布局。

Answer 2

我不太确定你在问什么。你想要这样的东西吗？ https://jsfiddle.net/Garconis/zqptbjur/

这是利用 Twitter Boostsrap CSS:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6" style="background: gray;">
            Content1
        </div>
        <div class="col-xs-6" style="background: wheat;">
            Content2
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="background: tan;">
            Content3
        </div>
    </div>
</div>

在 html 中浮动 3 个 div

floating 3 divs in html

html

ejs

twitter-bootstrap