Question

对不起，如果这是愚蠢的，但这是我学习CSS的第一天，我正在学习一门课程并创建一个示例布局，我似乎犯了一些错误或者被带走了添加我自己的小mod。我非常想解决这个问题，因为我很享受学习，并担心如果我被困在这上面，我就不会感觉到要继续学习。

我的页面底部有3个div，其中包含类.Featurebox，其中嵌套了3个带有类的其他div .Boximage

对于我的生活，尽管漂浮它们，但我不能让它们水平排列。我怀疑是因为我在父导航中使用了margin-left：auto和margin-right：auto。我已经使用这个解决方案整整一小时LOL，所以我第一次在这里寻求帮助。

这是我的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>

Answer 1

<div class="Featurebox">
    <div class="Boximage"</div>

我怀疑你的问题是上述问题。仔细看，你会看到语法错误。它应该是：

<div class="Featurebox">
    <div class="Boximage"></div>

为了进一步测试，我建议在框中添加一些内联内容以确保呈现。（如果没有特定的高度或宽度，它将是空的，如果指定宽度和高度，这不是问题，但我喜欢覆盖我的基础。）我的建议是simpyl添加带有文本的段落。

<div class="Featurebox">
    <div class="Boximage"><p>Box 1</p></div>

还应该注意的是，如果你向左浮动Featurebox，那么它的孩子也不需要浮动。因此，您可以删除float: left;

上的.Boximage

我还建议您找一个好的编辑器来编写代码，这样可以对元素进行颜色编码，并在元素中单击时突出显示标记的末尾。我个人使用notepad ++和dreamweaver，虽然很多人描绘了一个糟糕的Dreamweaver图片，只要你严格保持在Code视图中，那么它就是一个很棒的应用程序来编写代码，并且它具有FTP管理器的构建。

Answer 2

在>标记的开头部分之后，您遗漏了.Boximage：

<div class="Boximage"</div>

如果你纠正它似乎有效。

http://jsfiddle.net/CLUTP/1/

当我插入另一个div时，为什么我的div会彼此相邻？

2 个答案: