1

嗨，我对我的 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;
    }
4

3 回答 3

0

您的左右 div 正在折叠，因为您尚未清除父 div（包装器）。添加一个类到你的<div id="content_wrap" class="clearfix">

.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}
于 2013-02-08T22:24:08.790 回答
0

div id“content_wrap”与 CSS 引用“content_wrapper”不匹配

于 2013-02-08T22:24:57.877 回答
0

除了您问题的评论中提到的 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>
于 2013-02-08T22:29:58.897 回答