2

これは私のコードからの抜粋です：

<div id="column2">
  <div id="textbox">
    <h3>About</h3>
    <div id="text">
      <img id="portrait" src="images/portrait.png"/>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin tristique posuere. Phasellus quis rhoncus felis. </p>
      <p>Curabitur condimentum gravida lorem, non accumsan justo facilisis non. Nam at nisi venenatis tortor viverra posuere.</p>
    </div>
  </div>
</div>

その抜粋のCSSコード：

#textbox {
    background:lightgrey;
    margin:38px 0 0 0;
    width:400px;
    font-size:0.825em;
    line-height:150%;
}

#textbox p {
    margin-top:0;
}

#textbox h3 {
    margin: 0 0 15px 0;
}

#column2 {
    float:right;
    margin-right:150px;
}

#portrait {
    float:right;
    margin:0 0 10px 10px;
}

間違っているのは、「textbox」divに画像がない場合、中心が画像のある中心と異なることです。私はマージンを使用しています：0自動; ここに含まれていないラッパーdiv全体を中央に配置します。絶対位置で適切に中央に配置できる可能性がありますが（まだテストしていません）、画像が中央に影響するのはなぜですか？画像があるため、ラッパーdiv全体が右に約5〜10ピクセル移動します（テストしました）。助言がありますか？どうもありがとうございます。

フィドル： http： //jsfiddle.net/uVSTJ/1/

編集：センターポジショニングを使用していない場合、問題は発生しません。

編集2：問題を見つけましたが、解決方法がわかりません。ページの一番下に到達したときにのみ発生し、スクロールバーが表示されます。別の場所からマージンなどの計算を開始すると、+数ピクセル右になります。オーバーフロープロパティを使用せずにこれを解決する方法はありますか？

4

2 に答える 2

0

5〜10pxは、スクロールバーを思い出させます。画像によってWebページの高さがウィンドウの高さを超えている可能性があります。その場合、スクロールバーが追加されます。これにより、コンテンツが少し移動します。

于 2012-07-14T15:25:58.433 に答える
0

のスタイルは何#textですか？また、レイアウトに影響を与える可能性のあるスタイルが先行する場合があるため、フィドルは非常に役立ちます。divs

于 2012-07-14T15:35:56.380 に答える