我有以下简单的 html 页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
position: relative;
width: 1000px;
min-height: 300px;
margin: 0 auto;
border: 1px solid red;
background-color: green;
}
#allcontent {
position: static;
top: 225px;
margin: 225px auto 0px auto;
width: 850px;
background-color: blue;
}
#content {
border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
<div id="allcontent">
<div id="content">
<p>This is content</p>
</div>
</div>
</div>
</body>
</html>
它看起来和我想要的一模一样，但如果我从#page 中删除边框，它就会完全搞砸布局。我不知道为什么。我知道，我可以使用透明边框作为解决方法，但这看起来很奇怪...
最佳答案
因为你有 margin:225px auto 0px auto在你的<div id="allcontent">将整个内容向下推。
而不是使用 margin , 使用 position:absolute/relative将您的元素定位在您的 <div id="page"> 中.
关于CSS:为什么删除边框会严重影响 div 容器的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15187983/