要使一个父表中的两个子表具有相同的宽度,可以使用以下方法:
display: table;
,子表设置为display: table-cell;
,并且设置width: 50%;
,这样两个子表就会均分父表的宽度。示例代码:
<style>
.parent-table {
display: table;
width: 100%;
}
.child-table {
display: table-cell;
width: 50%;
}
</style>
<div class="parent-table">
<div class="child-table">
<!-- 第一个子表内容 -->
</div>
<div class="child-table">
<!-- 第二个子表内容 -->
</div>
</div>
display: flex;
,子表设置为flex: 1;
,这样两个子表就会自动均分父表的宽度。示例代码:
<style>
.parent-table {
display: flex;
width: 100%;
}
.child-table {
flex: 1;
}
</style>
<div class="parent-table">
<div class="child-table">
<!-- 第一个子表内容 -->
</div>
<div class="child-table">
<!-- 第二个子表内容 -->
</div>
</div>
无论使用哪种方法,都可以实现让父表中的两个子表具有相同的宽度。
领取专属 10元无门槛券
手把手带您无忧上云