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

对不起，如果这是愚蠢的，但它是我的第一天学习CSS，我正在按照课程和创建一个样本布局，我似乎犯了一些错误，或者被带走了添加我自己的小mods。我非常想要解决这个问题，因为我很享受学习，并担心如果我陷入困境，我不会喜欢继续。为什么我插入另一个div时我的div彼此相邻？

我有我与类.Featurebox页面内被嵌套在其它3周的div类.Boximage

对于我的生活在底部3周的div我不能让他们水平排队，尽管浮动他们。我怀疑这是因为我在父导航栏中使用了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>

来源

2013-04-24 user2317093

<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到左侧，那么它的孩子不也需要进行浮动。所以你可以删除.Boximage

此外，我建议你找到一个好的编辑器来编写你的代码，当你在一个元素中单击时，它会为你的元素着色代码并突出显示你的标签的末端。我个人使用记事本+ +和Dreamweaver，尽管很多人描绘了一个糟糕的Dreamweaver图片，只要你严格遵守代码视图，那么它是一个非常棒的应用程序，它使用FTP管理器编写代码。

来源

2013-04-24 20:58:15 Michael

尼斯尖感谢那 - 注意 – user2317093 2013-04-24 21:07:28

你的.Boximage标签的开口部分后缺少>：

<div class="Boximage"</div>

看来，如果你纠正工作。

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

来源

2013-04-24 20:58:36

男人，我很愚蠢，我只检查了它太五万次。谢谢！ – user2317093 2013-04-24 21:01:26

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

回答

相关问题