javascript - 使用 html css 为两个 bloc(动态行)保留一些高度

Question

我想为两个动态表保留一些高度。我知道解决方案是使用 javascipt(document.getElementById('bloc2').style.height = document.getElementById('bloc1').clientHeight ).

我们能否找到使用 HTML 和 CSS 的其他解决方案？

Answer 1

首先，请在语言能力上下功夫(如果英语不好，验证)，并使用StackOverflow的样式工具。

所有信息都在这里，检查一下。作为回答，我首先建议不要使用 <table>如果不是真的需要!

<div id="container">
    <div id="block_1" class="foo">
        <!-- Your HTML/text content -->
    </div>
    <div id="block_2" class="foo">
        <!-- Your HTML/text content -->
    </div>
</div>

对于 CSS(值是示例，请使用您的值):

#container {
    width: 100%;

    /* The height will be minimum 350px, depending on the content */
    min-height: 350px;

    /* I often use flexbox properties, it does really well the job */
    display: flex;
    flex-flow: row nowrap;
    justify-content: center; // Default value
}

.foo {
    width: 50%;
    /* this value will make your 2 blocks the same height according to their container */
    height: inherit;
}

检查 Flexbox 属性(有很多)，它可以减轻您的工作。