CSS，HTML无法将div内容放在div标签内

嗨，我有关于我的div标签的问题。我遵循这个教程，我专门做了他所做的并得到了不同的结果。我已经搜索了这个，我找不到答案。CSS，HTML无法将div内容放在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; 
    }

来源

2013-02-08 user2055955

'content_wrap'！='content_wrapper' – Barmar 2013-02-08 22:22:54

检查你的CSS的宽度，高度，边距和填充。 – j08691 2013-02-08 22:23:46

你的左，右的div正在崩溃，因为你还没有清除父DIV（包装）。一类添加到您的<div id="content_wrap" class="clearfix">

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

来源

2013-02-08 22:24:08 ashley

的div ID为“content_wrap”不匹配CSS参考“content_wrapper”

来源

2013-02-08 22:24:57

这是事实，但这不是他问题的答案。这就是为什么我发布它作为评论，而不是答案。 – Barmar 2013-02-08 22:30:33

我看到除了对你的问题的评论中提到的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-08 22:29:58 isherwood

右上角的元素不需要先到达。只要CSS中没有明确的浮动元素。 – 2013-02-08 23:00:03

你说得对，迈克。谢谢。我正在考虑一个单浮动的场景，浮动需要在其他内容之前出现。 – isherwood 2013-02-10 14:29:58

CSS，HTML无法将div内容放在div标签内

回答

相关问题