Question

我在html / css中创建了标题。 menuOne中出现意外的高度。如何摆脱这个高度。明确：我也加入了。任何人请建议我在哪里做错了。

HTML：

<div class="logo">
    <img src="http://dummyimage.com/140x60/000/fff" />
</div>
<div class="rightContent">
    <div class="menuOne">
        <div class="fLeft">LeftContent</div>
        <div class="fRight">RightContent</div>
        <div class="cBoth"></div>
    </div>
    <div class="menuTwo">Second menu will come here</div>
</div>

和CSS：

.fLeft {
    float:left
}
.fRight {
    float:right
}
.cBoth {
    clear:both
}
.logo {
    float:left;
    border:1px solid red
}
.rightContent {
    margin-left:150px;
    border:1px solid blue
}
.menuOne {
    background-color:#ccc
}
.menuTwo {
    background-color:#333;
    color:#fff
}

请参阅小提琴：http://jsfiddle.net/fLZHq

由于

Answer 1

将clear:both更改为clear:right会修复此问题。

.cBoth {
    clear:right;
}

第一种方法的演示：http://jsfiddle.net/fLZHq/3/

clear:both将元素推送到所有先前浮动元素的下方（在您的情况下，这包括徽标div）。而clear:right只将它推到你想要的右浮动元素下面。

第二种方法是保留clear:both但浮动你的rightContent并删除左边距，如下所示：

.rightContent {
    float:left;
    border:1px solid blue
}

演示第二种方法：http://jsfiddle.net/fLZHq/7/

Answer 2

试试这个

.rightContent {
    margin-left:150px;
    float: left;
    border:1px solid blue
}

Answer 3

有关页面布局的css的所有问题都可以通过以下方式找到 Firefox 中提供 3d视图。

你已经使用float left for image并且没有使用float作为rightContent div。因此，图像与'rightContent'div重叠。这就是你需要为'rightContent'div提供保证金的原因。

所以，一旦你为'rightContent'div给了float：left，就会解决意想不到的问题。

意外的高度

3 个答案: