Question

我有两个div：向左浮动并向右浮动。右侧div上的边距打破了左侧div，使其在页面上看起来比它应该低。 我希望两个div都触及顶部。

HTML：

 <div class="right_div">
            This div is in the right place.
        </div>

    <div class="clear"> </div>

    <div class="left_div">

This div should be at the top</div>

CSS：

.right_div {

    float: right;
    margin-right:20px;
    margin-top: 20px;
    font-weight: 600;
    background-color:blue;
}

 .left_div{

    margin-left: 20px;
    margin: 0 0 0 20px;
    padding: 0;
    background-color: tomato;
    text-align: left;
    max-width: 10em;

 }

.clear {

    clear:both;
}

这是JSFIDDLE：http://jsfiddle.net/eLSc8/

Answer 1

删除

<div class="clear"> </div>

试试这个

<div class="right_div">
            This div is in the right place.
        </div>

    <div class="left_div">

Answer 2

删除

<div class="clear"> </div>

并且红色元素将保持在顶部作为旁注，应该避免仅用于样式目的的空标记。如果您需要在某处应用浮动清除，则应使用非结构性方法，如 easyclearing 和现代变体（例如，请参阅.clearfix类html5 boilerplate）

Answer 3

试试这个

http://jsfiddle.net/eLSc8/1/

请删除此清除

<div class="clear"> </div>

Answer 4

正如大家所说;你可以失去清算div。然后只需向其他div添加一个浮动以对齐它。根据您的结构以及您希望如何定位，您可能需要包含它们或添加边距。检查jsfiddle.net/RSy6F/2 /

Answer 5

这是否是预期效果：

http://jsfiddle.net/eLSc8/4/？

HTML：

<div class="left_div">This div should be at the top</div>
<div class="right_div">This div is in the right place.</div>

CSS：

.right_div {
    font-weight: 600;
    background-color:blue;
    position: absolute;
    top: 20px;
    right: 20px;
    height: 2.2em;
}
.left_div {
    position:absolute;
    top: 20px;
    left: 20px;
    background-color: tomato;
    height: 2.2em;
}

浮动的div有一个打破流量的余量

5 个答案: