0

(提供された現在の回答は不明確であることに注意してください)

左と右の 2 つの部分に分かれた Web サイトのヘッダーがあります。左側の高さは 130 ピクセル、右側の高さは 185 ピクセルです。float を使用してこれらをレイアウトしました。

div の左ヘッダーの下にあるコンテンツを上に移動したいので、左ヘッダーのすぐ下にあります。この div に境界線を付けて負のマージンを指定すると、境界線が期待どおり上に移動します。ただし、div 内のコンテンツは上に移動していません。185px の下にぶら下がっています (明らかに右ヘッダーから)。このdivのパディングをゼロに設定していることに注意してください。私は何を間違っていますか?

最近のバージョンの Chrome または Firefox では機能しません。ありがとう。

関連する HTML コードは次のとおりです。

<body style="margin: 0px">
    <div class="page">
        <div>
            <div class="leftHeader">
                <div class="headerMissingEnd">
                    <!-- img src="images/header.png" Title" width="750px" / -->
                </div>

            </div>
            <div class="rightHeader">
                <div style="height:185px;padding:0px">
                    <canvas margin:"0" width="360px" height="185px" loop="true" fps="30" bgcolor="#ffffff" init="fn_canvas">
                    </canvas>
                </div>
            </div>
            <br class="clear" />
        </div>
       <div style="margin-top:-60px; padding:0;border: 1px dashed red">
          some text that appears too low, not a top of div as expected
       </div>

CSS コード:

.clear {
   clear: both;
   line-height: 0px;
}

.page {
   width: 1005px;
   margin: 0px auto;
   color: #333;
   background-color: #fff;
}

.leftHeader {
    float: left;
    width: 630px; 
    margin: 0px auto;   
 }

.rightHeader {
    float: left;
    width: 360px; 
    height: 185px;
    margin: 0px auto;   
 }

.headerMissingEnd {
    margin: 0px;
    width: 640px;
    height: 130px;
   background: url('images/header-left.png') no-repeat;
}
4

2 に答える 2

2

margin要素の相対位置を変更するために負を使用しないでください。position: relative; top: -60px;代わりに使用してください:

<div style="position: relative; top: -60px; padding:0;border: 1px dashed red;">
      some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected
</div>

( http://jsfiddle.net/BMPqP/10/ ) その後、 でラッピングの問題を修正できますwidth: 600px;


古い回答テキスト:つまり、それはあなたの最後のdiv幅が 100% であり、float編集されていないためです。( の既定の動作div)。

div がフローティングされていない場合、その中のテキストは、その外側にあるフローティング div と相互作用します。さらにテキストを追加すると、( http://jsfiddle.net/BMPqP/6/ )テキストが上位の他のヘッダーと衝突しないことがわかります。

私が提案する解決策は、div をフロートさせてサイズを設定することです。

<div style="margin-top:-60px; padding:0;border: 1px dashed red; float: left; width: 630px;">
    some text that appears too low, not a top of div as expected
</div>

その後、テキストは問題なく、ページのメイン コンテンツも問題ありません: http://jsfiddle.net/BMPqP/7/

于 2013-03-12T19:34:49.430 に答える
0

また、ハードコードされたオフセットを使用せずに実際にスムーズなスタッキングが必要な場合はfloat: right;、ヘッダーに使用する必要があります。(ヘッダー部分は、マークアップ内で場所を入れ替える必要があります。)

    <div class="leftHeader">
        <div class="headerMissingEnd">
            <!-- img src="images/header.png" Title" width="750px" / -->
        </div>
    </div>

    <div style="padding:0;border: 1px dashed red;">
        some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected
    </div>
</div>

そしてCSS:

.clear { クリア: 両方; 行の高さ: 0px; }

.page {
   width: 1005px;
   margin: 0px auto;
   color: #333;
   background-color: #fff;
}

.leftHeader {
    float: right;
    width: 630px; 
    margin: 0px auto;   

    background-color: black;

    opacity: 0.5;
 }

.rightHeader {
    float: right;
    width: 375px; 
    height: 185px;
    margin: 0px auto; 

    opacity: 0.5;

    background-color: navy;
 }

.headerMissingEnd {
    margin: 0px;
    width: 640px;
    height: 130px;
   background: url('images/header-left.png') no-repeat;
}
于 2013-03-12T20:18:11.970 に答える