gpt4 book ai didi

html - 具有相同高度的 float div

转载 作者:太空宇宙 更新时间:2023-11-03 23:32:28 25 4
gpt4 key购买 nike

我有四个 div float 。如果第一个div的内容较多,则四个div的边框不一样。但我希望根据四个 div 的冗长内容增加边框高度。

如本例所示,第一个 div 包含更多内容,因此四个 div 的边框底部高度不同。对于 div 中的不同内容,如何在四个 div 中制作相同的高度。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>

<div>
<div style="float: left; width: 24.5%; border: 1px solid;">
<span>This is a test span</span> <span>This is a test span</span> <span>This is a test span</span> <span>This is a test span</span> <span>This is a test span</span>
</div>
<div style="float: left; width: 24.5%; border-top: 1px solid; border-bottom: 1px solid;">Box2</div>
<div style="float: left; width: 24.5%; border: 1px solid;">Box3</div>
<div style="float: left; width: 24.5%; border: 1px solid;">Box4</div>
<br style="clear: left;" />
</div>

</body>
</html>

最佳答案

有很多方法可以实现这一点。例如:1. 为包装器 div 添加类 .container

.container {
display: table;
width: 100%;
border-collapse: collapse;
}

.container div {
display: table-cell;
width: 24.5%; border: 1px solid;
}

JsFiddle DEMO

你可以读到这个问题here

关于html - 具有相同高度的 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24952191/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com