Question

我需要一个使用div的3列表。

它必须是流动的并且覆盖窗口宽度的100％。

左列应为宽度的50％，其他两列各为20％，剩余空间用于单元格填充。

此外，我需要确保当单元格内容被包装时，该行中的每个单元格都会被调整，以便高度匹配。（就像使用<table>标签一样）。我希望每个行和列都有一个边框，这样表的每一行都是清晰的。我希望有人能帮帮忙。

我已经看过并寻找解决方案，但到目前为止它已经让我望而却步。

Answer 1

在此处查看JSFIDDLE

<div class="table">
   <div class="cell"></div>
   <div class="cell"></div>
   <div class="cell"></div>
</div>



.table{
position:relative;  /*so children div can use 100% height and not go over */
width:100%; /* as long as this div's parent is body it will take up whole screen */
height:250px; /*make whatever you want */
padding:8px; /* will make that spacing you wanted */
}


.table .cell{
width:20%;
height:100%;
background-color:#bbb;
display:inline-block; /*so they display inline */
}

.table .cell:first-of-type{
width:50%;
height:100%;
background-color:#ddd;
}

3使用div的列表（表现为a）<table> </table>

1 个答案: