使用 float:left 时，Div 被推到右侧

Question

我目前正在创建一个网站，但遇到了一件奇怪的事情：我有一个宽度为 950 且位于页面中心的内容 div。在里面我有一个标题 div、一个菜单 div 和一些其他内容 div。我希望菜单 div 和其他内容 div 彼此相邻，所以我考虑在两个 div 上使用 float:left。但是，当我在菜单 div 上使用这个 float:left 时，它会被推到右边，我不知道为什么。我认为其他一些因素正在将其推向右侧。

顺便说一句，我正在使用自定义 Drupal 主题，Zen 的子主题来创建页面。

这是我用来创建页面的 HTML（没有标题）：

<div id="root">
<div class="content">
    <div class="left-menu">
        <ul>
            <li><p>Camera</p></li>
            <li><p>Audio</p></li>
            <li><p>Licht</p></li>
            <li><p>Lenzen</p></li>
            <li><p>Grip</p></li>
            <li><p>Accessoires</p></li>
            <li><p>Recorders</p></li>
            <li><p>Transport</p></li>
            <li><p>Edit suits</p></li>
            <li><p>Crew</p></li>
        </ul>
    </div>

    <div class="products-overview">
    This is some other content that I want to the right of the menu.
    </div>

</div>

以下是我在左侧菜单和产品概览中设置的一些 CSS 属性：

.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}

.products-overview {
background-color: #BBB;
float: left;
}

谁能解释一下为什么左侧菜单被推到右侧？

Answer 1

嗯，我相信这是您使用的 normalize.css 样式表的结果。

问题实际上源于.header 元素，其中有一个表格。规范化样式表有一个margin-bottom:1.5em 应用于表格，它转换为.header 元素上的边距（因为它没有填充/边框），这反过来将.left-menu 发送到右侧（因为边距导致左边没有空间放）。

添加到您当前的.header table 定义可以解决这个问题，只需简单：

.header table{
    margin-bottom: 0;
}

我希望这就是您想要的！如果没有，请告诉我，我很乐意提供进一步的帮助。祝你好运！

Answer 2

我试图复制您的问题。我做到了，并找到了一个可行的解决方案。只需将 products-overview 类设置为float:none。看到这个小提琴。 http://jsfiddle.net/shaansingh/yj4Uc/

Answer 3

在 Mozilla Firefox 中，我觉得没问题。从您的代码中，我只能看到您需要内容 div 的宽度。并注意尺寸，尤其是左/右填充和边框。