Question

我正在创建一个网站，我遇到了一个奇怪的事情：我有一个950宽度的内容div，并以页面为中心。在里面我有一个标题div，一个菜单div和一些其他内容div。我希望菜单div和其他内容div彼此相邻，所以我想在两个div上使用float：left。但是，当我使用这个浮点数：左边的菜单div，它被推到右边，我无法弄清楚为什么。我认为其他一些因素正在将其推向正确的位置。

我正在使用自定义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的宽度。并观察尺寸，尤其是左/右填充和边框。

当使用浮动时，Div被推向右侧：左侧

3 个答案: