0

私は 2 つの div を持っています: フロート左とフロート右。右の div の余白が左の div を分割しているため、本来よりもページの下に表示されます。両方の div が top に触れるようにします。

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 に答える
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 に答える