抱歉，如果这很愚蠢，但这是我学习 CSS 的第一天，我正在学习一门类(class)并创建一个示例布局，我似乎犯了某种错误或者被冲昏了头脑，添加了我自己的小 mod。我非常想解决这个问题，因为我很享受学习，我担心如果我卡在这个问题上，我就不想继续了。
我的页面底部有 3 个 .Featurebox 类的 div，其中嵌套了 3 个其他 .Boximage 类的 div
尽管它们漂浮着，但我无法让它们水平排列。我怀疑这是因为我在父导航中使用了 margin-left:auto 和 margin-right:auto。我已经使用这个解决方案玩了整整一个小时，哈哈，所以我第一次在这里寻求帮助。
这是我的 CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
这是我的 HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
最佳答案
<div class="Featurebox">
<div class="Boximage"</div>
我怀疑你的问题出在上面。仔细看，你会看到一个语法错误。应该是:
<div class="Featurebox">
<div class="Boximage"></div>
为了进一步测试，我建议在框中放入一些内联内容以确保其呈现。 (如果没有具体的高度或宽度，它将是空的，如果指定了宽度和高度，这不是问题，但我喜欢覆盖我的基础。)我的建议是简单地添加一个带有文本的段落。
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
还应注意，如果您将 Featurebox 向左浮动，那么它的子项也不需要 float 。因此，您可以删除 .Boximage
float: left;
此外，我建议您找一个好的编辑器来编写您的代码，它可以对您的元素进行颜色编码，并在您在元素中单击时突出显示标签的结尾。我个人使用 notepad++ 和 dreamweaver，虽然很多人对 dreamweaver 的印象很差，但只要您严格保持在代码 View 中，那么它就是一个很棒的编写代码的应用程序，它具有内置 FTP 管理器的功能。
关于html - 当我插入另一个 div 时，为什么我的 div 彼此相邻？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16201980/