Html 每个div元素的高度不相等
我正在做一个页脚，它被分成3个块。 但它们的高度不相等，所以右边界线的高度也不相等 屏幕： 怎么办？怎么了？ 我处理这个问题的方法是在一个页脚块中以3块内容为中心是不好的 代码：Html 每个div元素的高度不相等,html,css,block,footer,Html,Css,Block,Footer,我正在做一个页脚，它被分成3个块。 但它们的高度不相等，所以右边界线的高度也不相等 屏幕： 怎么办？怎么了？ 我处理这个问题的方法是在一个页脚块中以3块内容为中心是不好的 代码： <html> <head> </head> <body> <style> #footer { height: auto; width: 100%; background-color: #55585d; margin-top: 3
<html>
<head>
</head>
<body>
<style>
#footer {
height: auto;
width: 100%;
background-color: #55585d;
margin-top: 30px;
display: table;
}
#blocks {
margin-left: auto;
margin-right: auto;
width: 1120px;
}
.f-block {
box-sizing: border-box;
width: 373px;
float: left;
padding: 30px;
text-align: center;
border-right: 1px solid #000000;
}
</style>
<footer>
<div id="footer">
<div id="blocks">
<nav>
<div class="f-block">
asdasdaasdfghfghfghfghfghfghfghf
</div>
</nav>
<div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
</div>
<div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
</div>
</div>
</div>
</footer>
</body>
</html>
移除左侧浮动，添加显示：表格单元格；在子f-块上，使它们具有相同的高度最高的一个决定所有其他单元格的高度 也可以删除或只做 使用.f-block:nth-of-type1选择第一个f-block左添加边框 页脚{ 高度：自动； 宽度：100%； 背景色：55585d； 边缘顶部：30px； 显示：表格； 文本对齐：居中； } 块{ 左边距：自动； 右边距：自动； 宽度：1120px； } .f-块：类型1的第n个{ 左边框：1px实心000000； } .f-block{ 框大小：边框框； 宽度：373px； 填充：30px； 文本对齐：居中； 右边框：1px实心000000； 显示：表格单元格； } ASDASDAASDFGGHFGHFGHGHF aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
移除左侧浮动，添加显示：表格单元格；在子f-块上，使它们具有相同的高度最高的一个决定所有其他单元格的高度 也可以删除或只做 使用.f-block:nth-of-type1选择第一个f-block左添加边框 页脚{ 高度：自动； 宽度：100%； 背景色：55585d； 边缘顶部：30px； 显示：表格； 文本对齐：居中； } 块{ 左边距：自动； 右边距：自动； 宽度：1120px； } .f-块：类型1的第n个{ 左边框：1px实心000000； } .f-block{ 框大小：边框框； 宽度：373px； 填充：30px； 文本对齐：居中； 右边框：1px实心000000； 显示：表格单元格； } ASDASDAASDFGGHFGHFGHGHF aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
这里的问题是分区的内容。空白未正确处理。把它换成别的东西
<footer>
<div id="footer">
<div id="blocks">
<nav>
<div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
</div>
</nav>
<div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
</div>
<div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
</div>
</div>
</div>
</footer>
这里的问题是分区的内容。空白未正确处理。把它换成别的东西
<footer>
<div id="footer">
<div id="blocks">
<nav>
<div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
</div>
</nav>
<div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
</div>
<div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
</div>
</div>
</div>
</footer>
似乎给你带来麻烦的是你的内在因素。你指定样式了吗？就像给它自动高度一样？Nav是唯一的语义元素，没有任何属性和对代码的影响。还是我错了？它确实会影响你。每个HTML元素都有自己的样式，如果不指定它，就会发生奇怪的事情。要么给它一个合适的样式，要么移除它，要么使用其他东西。如何影响所有这些事情？你可以右键单击->检查网页上的元素，查看其样式和结构。似乎给你带来麻烦的是元素内部。你指定样式了吗？就像给它自动高度一样？Nav是唯一的语义元素，没有任何属性和对代码的影响。还是我错了？它确实会影响你。每个HTML元素都有自己的样式，如果不指定它，就会发生奇怪的事情。要么给它一个合适的样式，要么移除它，要么使用其他东西。如何影响所有这些事情？有什么样式？你可以右键单击->检查网页上的元素以查看其样式和结构我不想使用flex。它没有得到广泛支持。这对我来说不是一个解决方案。那么所有的选择都将是非常痛苦的，比如处理位置的混合：相对/绝对或固定高度。Flexbox几乎得到了一致支持，在绝大多数知名网站中都有使用，甚至还有一个JS polyfill，你想支持你奶奶的IE8，我不想使用flex。它没有得到广泛支持。这对我来说不是一个解决方案。那么所有的选择都将是非常痛苦的，比如处理位置的混合：相对/绝对或固定高度。Flexbox几乎得到了一致支持，在绝大多数知名网站中都有使用，甚至还有一个JS polyfill，你想支持你奶奶的IE8，我不想使用flex。它没有得到广泛支持。这不是我的解决办法/然后我把它放在你的帖子里，2它得到广泛支持，在现实世界中浏览器支持率>97%，3使用display:table；显示：表格单元格；相反-更新了我的答案。IE 8不支持flex@AdriannoBarello0.34%的互联网用户使用IE8，这可能是您的一项要求，但说flex没有得到广泛支持是不正确的。@AdriannoBarello更具体一点。什么不起作用？看起来它对我有效-如果它对你无效，请澄清你的意思。我不想使用flex。它没有得到广泛支持。这不是我的解决办法/然后我把它放在你的帖子里，2它得到广泛支持，在现实世界中浏览器支持率>97%，3使用display:table；显示：表格单元格；相反-更新了我的答案。IE 8不支持flex@AdriannoBarello0.34%的互联网用户使用IE8，这可能是您的一项要求，但说flex没有得到广泛支持是不正确的。@AdriannoBarello更具体一点。什么不起作用？看起来它对我很有效-如果它对你不起作用，请澄清你的意思。它很糟糕。这就产生了另一个问题——文本可以重读div@AdriannoBarello那么min-height呢？或者您可以使用javascript动态计算高度。JS不是一个解决方案。这是一个CSS问题，需要在这里找到解决它的方法。这很糟糕。这就产生了另一个问题——文本可以重读div@AdriannoBarello那么min-height呢？或者您可以使用javascript动态计算高度。JS不是一个解决方案。这是一个CSS问题，需要解决它的方法。块不居中。它们与左撇子一致——为什么语义在这里真的是个问题。我需要它的语义结构的网站：/。它必须在这里ehhhh@AdriannoBarello然后，您必须像nav一样动态地添加类。既然nav有一个默认的css display:block，我就不能像nav{display:inherit；}这样做吗？要删除导航默认值，会对此产生不良影响吗？在不向导航添加类的情况下？除了将类分配给之外，我是否可以用其他方法执行此操作？存在问题。块不居中。它们与左撇子一致——为什么语义在这里真的是个问题。我需要它的语义结构的网站：/。它有
来到这里ehhhh@AdriannoBarello然后，您必须像nav一样动态地添加类。既然nav有一个默认的css display:block，我就不能像nav{display:inherit；}这样做吗？要删除导航默认值，会对此产生不良影响吗？在不向导航添加类的情况下？除了将类分配给以外，我还可以使用其他方法吗？