Question

您好我对div标签有疑问。我按照本教程，我特别完成了他的所作所为，得到了不同的结果。我搜索了这个，我找不到答案。

问题是我的content_wrapper div中的div标签不会放在content_wrapper div中，即使我特意做了与教程中相同的事情。相反，div标签将自己置于我的content_wrapper div的底部。我目前正在使用Dreamweaver CS5，如果有任何帮助的话。

这就是我写我的div的方式：

<body>

    <div id="header"> This is my header </div>

    <div id="content_wrap"> 

        <div id="left_content"> Advertisement </div>

        <div id="right_content"> </div>

    </div>

</body>

这是我的CSS：

#header{
    height:1000px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;
}

#content_wrapper{
    height:800px;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    }

#left_content {
    height:800px;
    width:240px;
    float:left;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;

}

#right_content {
    height:800px;
    width:730px;
    margin-left:10px;
    margin-right:auto;
    float:right;
    border:solid 1px;
    }

Answer 1

你的左右div正在折叠，因为你还没有清除父div（包装器）。在<div id="content_wrap" class="clearfix">

中添加一个班级

.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Answer 2

div id“content_wrap”与CSS引用“content_wrapper”

不匹配

Answer 3

除了您对问题的评论中提到的ID不匹配外，我还发现了一些问题。

首先，右浮动元素需要先行。然后，浮动元素的宽度必须小于包装元素的宽度，包括填充和边距，或者它们换行到新行。

最后，您可能不希望浮动元素的自动边距。我不能确定，因为我不确定你追求的是什么。

http://jsfiddle.net/z8Gwg/

#header {
    height:100px;
    width:100px;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;
}
#content_wrapper {
    height:80px;
    width:98px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    background-color: #eee;
}
#left_content {
    height:80px;
    width:20px;
    float:left;
    border:solid 1px;
    overflow: hidden;
}
#right_content {
    height:80px;
    width:70px;
    float:right;
    border:solid 1px;
}

<body>
    <div id="header">This is my header</div>
    <div id="content_wrapper">
        <div id="right_content"></div>
        <div id="left_content">Advertisement</div>
    </div>
</body>

CSS，HTML不能将div内容放在div标签中

3 个答案: