排列 3 div - div 2 向左 - div 1 和 3 向右答案

【问题标题】：Arranging 3 div - div 2 to the left - div 1 and three to the right排列 3 div - div 2 向左 - div 1 和 3 向右
【发布时间】：2016-01-02 05:59:20
【问题描述】：

我有三个 div - 我想这样安排

+++++++++++++
+ div2 + div1 +
+ div2++++++
+____+ div3 +
+++++++++++++

但是当 div2 的高度小于 div1 时，即使我在 css 中将 div 1 和 div3 向右浮动，div 3 也会像这样向左浮动。

+++++++++++++
+ div2 + div1 +
++++++ div1 +
+ div3 + ___ +
+++++++++++++

调整大小时我得到了这个 - 调整大小时我想要什么。

++++++
+ div1 +
++++++
+ div2 +
++++++
+ div3 +
++++++

这是html

<div class="row">

            <div class="row-item col-1_2 div1">
                <?php print render($content['field_1']) ?>
            </div>

            <div class="row-item col-1_2 div2">
                <?php print render($content['body']); ?>
            </div>

            <div class="row-item col-1_2 div3">
                <?php print render($content['field_2']); ?>
            </div>

那么 - 如果可能的话，我的 css / html 应该是什么？

【问题讨论】：

你在使用引导程序吗？

标签： html css css-float

【解决方案1】：

要管理浮动 div 和空间，您可以使用 clear css 属性，如下所示：

<style>
    #div1, #div3{
        float: right;
        height: 100px;
        width: 100px;
        border: 1px solid blue;
    }

    #div2, #div2-1{
        float: left;
        height: 50px;
        width: 50px;
        border: 1px solid red;
    }

    #div2-1{
        clear: right;
    }

    #div3{
        clear: left;
        border: 1px solid green;
    }
</style>

<div class="row">
    <div id="div1">DIV1</div>

    <div id="div2">DIV2</div>

    <div id="div2-1">DIV2-1</div>

    <div id="div3">DIV3</div>
</div>

如你所见，div2的高度比div1要小。

【讨论】：