gpt4 book ai didi

html - 如何使 div 部分的高度自动适应其内容的高度?

转载 作者:太空宇宙 更新时间:2023-11-04 13:10:12 25 4
gpt4 key购买 nike

我有一个 div容器 id=middle通过此代码在页面中居中:

header, #middle, footer {
margin-left: auto;
margin-right: auto;
}

div里面名为 middlenavmain部分。div就像 nav 的容器一样和 main , 所以对齐 nav 应该更容易在左边和main向右移动,同时保持它们居中。

我尝试通过以下代码进行对齐:

#middle {
width: 849px;
height: 600px; /*I wanto to set this to auto or get rid of it*/
}

nav {
width: 200px;
float: left;
}

main {
width: 649px;
float: right;
}

有效,但我必须指定 #middle 的高度, 它不会自动适应 其内容的高度,弄乱了所有其余的布局。在我的站点中,main 和 nav 的高度因页面而异。

我该如何解决这个问题?我不想为 #middle 指定固定高度,相反,我想要 #middle根据 main 之间的最大高度改变其高度和 nav .

我不知道它是否有用,但 CSS 代码以以下结尾:

footer {
width: 849px;
height: 50px;
}

这是我页面的 HTML 代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
...
</header>
<div id="middle">
<nav>
...
</nav>

<main>
...
</main>
</div>
<footer>
...
</footer>
</body>
</html>

注意navmain是语义 html5 标签,类似于 div

最佳答案

添加 <div>clear: both;</main> 之后.然后您可以删除 #middle 的高度

关于html - 如何使 div 部分的高度自动适应其内容的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24734006/

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