html - 将 3 div - div 2 排列到左侧 - div 1 和 3 排列到右侧

Question

我有三个 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 应该是什么？

Answer 1

要管理 float 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>

如您所见，div2s 的高度小于 div1。