1

我正在处理一个网页，我设置了 div 标签的宽度，并且正在使用 margin: 0 auto; 但我的内容仍然在左边。我正在使用 OS X 10.7.3、Chrome 19.0.1084.46 和 Dreamweaver CS6

这是我的CSS：

@charset "UTF-8";
body {
    text-align: center;

    display: block;
}
.container {
    float: left;
    height: 2000px;
    width: 964px;
    margin: 0 auto;
    text-align: left;
}
.header {
    float: left;
    height: 117px;
    width: 964px;
}
.leftcol {
    float: left;
    height: 1715px;
    width: 534px;
    margin-top: 20px;
margin-right: 10.125px;
    margin-bottom: 20px;
    margin-left: 30px;
}    
.navbar {
    float: left;
    height: 69px;
    width: 964px;
}
.rightcol {
    float: left;
    height: 1715px;
width: 306px;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 20.25px;
}
.video {
    float: left;
    height: 301px;
    width: 534px;
}
.pagebody {
    float: left;
    height: 1749px;
    width: 920px;
    background-color: #FFF;
    margin-top: 0px;
    margin-bottom: 21.25px;
    margin-left: 22px;
}

以及使用 CSS 的 HTML：

<body>
<div class="container">
  <div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
  <div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
  <div class="pagebody">
    <div class="leftcol">
        <div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
     </div>
     <div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
    </div>
   </div>
 </body>
</html>
4

2 回答 2

4

因为你也申请了float: left;。

您还应该以 doctype 声明开始您的源代码，例如<!doctype html>，并确保您的 HTML和CSS是有效的。

于 2012-05-20T05:29:34.560 回答
4

首先，您不能水平浮动左和边距自动。反正有什么意义。你想让你的容器居中，而不是推到左侧。现在这可能会给您带来麻烦，因为事情并没有按照您的意愿进行，因为您在那里拥有的所有其他元素都浮动到左侧。

像标题和导航栏这样的元素甚至不应该被浮动，即使你没有浮动它们也会很好，它们只需要被清除。你需要做一些阅读。

底线。当你漂浮时，你需要在完成后清除你的漂浮物。

这是您的阅读材料：如果这是您唯一要做的事情，请至少阅读The Great Collapse on CSS Tricks，但我建议您通读一遍（并搜索更多内容，直到坚持下去）

http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseverything.net/easyclearing.html

浮动是非常重要的理解。

ps 不要在容器上定义高度，你希望它灵活，不是吗？我知道您再次定义了高度，因为您不完全了解 CSS 浮动。这就是你需要阅读的原因:)

祝你好运 ：）

于 2012-05-20T05:43:56.300 回答