Question

我有一个有3个盒子的容器。两个框浮动到右边，占据父div的高度约50％（ofter overflow-y：隐藏在父div上），因此它们的大小相同。他们有一个漂浮在左边的兄弟姐妹，我希望根据它的2个兄弟姐妹的身高（因此是父母身高）来扩大身高。

如果可以避免，我不想将父级设置为固定高度（因为如果浏览器大小发生变化，它可以改变大小）。

A JsFiddle

  <article>
    <div class="box-container">
        <section class="box-half left-box">
            <h3>Bigger box</h3>

            <div class="chart">
                <p>I want this box to fill the entire height</p>
            </div>
        </section>

        <section class="box-half">
            <div>
                <h3>One half box</h3><span>With some text</span>
            </div>
        </section>

        <section class="box-half">
            <div>
                <h3>Another half box</h3><span>With another text</span>
            </div>
        </section>
    </div>
</article>




 *, *:before, *:after {
    box-sizing: border-box;
}

.left-box {
    background: white !important; 
}

.box-container {
    overflow-y: hidden;
}

article {
    width: 100%;
    background: green;
}

.box-full,
.box-half {
    width: 100%;
    float: left;
    padding: 0.25em;
    text-align: center;
}

.box-half {
    width: 50%;
    background: blue;
}

Answer 1

您可以尝试使用display:table和display:table-cell代替float ...请参阅this Fiddle

使左浮动展开以匹配两个右浮的兄弟姐妹

1 个答案: