0

我有两个 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/

4

5 回答 5

4

消除 

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

尝试这个

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

    <div class="left_div">
于 2013-06-28T12:59:46.967 回答
1

去除

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

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

于 2013-06-28T13:00:33.750 回答
1

尝试这个

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

请删除这个 clearboth

<div class="clear"> </div>
于 2013-06-28T13:01:29.677 回答
0

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

于 2013-06-28T13:15:51.150 回答
0

这是想要的效果吗：

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;
}
于 2013-06-28T13:22:05.047 回答