Question

我有两个div，彼此不是兄弟姐妹。我必须在每种情况下都将它们的高度设置为相同（即，即使其中一个高度增长，也相应地重新调整其大小）。

我见过这两种方法：

但这两个都是为了兄弟元素。

只有当我使用class =“row”时才适用。没有它就行不通。

HTML

<div class="col">
    <div class="c1" >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="col">
    <div class="cl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
    </div>
 </div>

CSS

.col, .cl {
    display: table-cell;
       padding: 1em;
    border: solid;
}

任何解决方案？

编辑： - 有兴趣知道设置两个div的高度的确切方法相同（因为我的两个div都在不同的文件中，但是在同一个html页面上）

Answer 1

使用table-cell时，您应该使用table（有时甚至是table-row）来获得预期结果的跨浏览器。因此，要么使用body作为table，要么使用包装，例如＆＃34;行＆＃34;你用过。与flex相同，就像在示例链接中一样，它需要列子项的父项。如果没有，则需要使用脚本来计算每个高度，并为两者设置相同的值。

以下是使用table / table-cell

的示例

＆＃13;

.tbl {
    display: table;
    height: 100%;
}
.col {
    display: table-cell;
    padding: 1em;
    border: 1px solid gray;
    width: 50%;
    height: 100%;
}
.cl {
    height: 100%;
    padding: 1em;
    border: 1px solid gray;
}

＆＃13;

<div class="tbl">
    
    <div class="col">
        <div class="cl" >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
    
    <div class="col">
        <div class="cl">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
     </div>
    
</div>

＆＃13;

为两个不是彼此兄弟的div设置相同的高度

1 个答案: