0

抱歉，如果这很愚蠢，但这是我学习 CSS 的第一天，我正在学习一门课程并创建一个示例布局，我似乎犯了某种错误，或者因为添加我自己的小模块而忘乎所以。我非常想解决这个问题，因为我喜欢学习，并且担心如果我被困在这个问题上，我就不想继续了。

我的页面底部有 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>
4

2 回答 2

2 
<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: left;所以你可以删除.Boximage

此外，我建议您找到一个好的编辑器来编写您的代码，当您在一个元素中单击时，它会为您的元素着色并突出显示标签的末端。我个人使用notepad++和dreamweaver，虽然很多人对dreamweaver的印象很差，但只要你严格保持在代码视图中，那么它是一个很好的编写代码的应用程序，它具有内置的FTP管理器。

于 2013-04-24T20:58:15.727 回答
1

你错过了标签>的开头部分之后：.Boximage

<div class="Boximage"</div>

如果你纠正它，它似乎工作。

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

于 2013-04-24T20:58:36.463 回答