排列 3 div - div 2 到左边 - div 1 和 3 到右边

Question

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

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

但是当div2的高度小于div1时，即使我浮动div1和[=52，div3也会像这样向左浮动=]3 在 css.

右边

++++++++++++
+ 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

要管理浮动 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。

排列 3 div - div 2 到左边 - div 1 和 3 到右边

Arranging 3 div - div 2 to the left - div 1 and three to the right

html

css

css-float