gpt4 book ai didi

css - 兄弟 div 匹配容器中的高度

转载 作者:技术小花猫 更新时间:2023-10-29 10:13:00 30 4
gpt4 key购买 nike

我在容器中有三个 div:http://jsfiddle.net/fBe9y/

一个div内容很多。如何让内容较少的其他两个 div 与最长的 div 的高度匹配?

我尝试将 height: 100% 添加到所有 div,但它不起作用,因为这需要一个 height div.container,在渲染之前我不知道。

最佳答案

我推荐使用 display: table-row;display: table-cell;为了这。简而言之,您所做的是制作表格布局,但使用 <div>标签,然后将它们设置为像表格一样的样式。

出于语义和可访问性原因,这比仅使用表格要好。

但一般来说,CSS 并没有为您提供多种方式来以这种方式引用元素的 sibling 。 <table>标签确实如此,但它会混淆屏幕阅读器和其他东西。

如果你想要更多的行,你会有更多的.container <div> s,然后创建另一个 <div>把它们全部包起来,然后给它display: table; .

因此,使用您拥有的相同 HTML,此 CSS 可以执行您想要的操作:

.container
{
display: table-row;
}

.tile
{
display: table-cell;
width: 100px;
background: #eee;
border: 1px solid black;
}​

参见 Fiddle .

注意:虽然 display: table;等。是widely supported , IE 直到版本 8 才添加支持。如果你计划在 IE 7 或更低版本上支持它,你将被迫使用更复杂的方法,比如 @Hristo's .

关于css - 兄弟 div 匹配容器中的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12716525/

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