1

ほとんどのページでコンテンツ領域の中央に配置したいdivがあり、「margin:5px auto;」を介してそれを達成しています。

特定のページで、画像とキャプションを右側に配置し（のように<div><img /><cite></cite></div>）、元のdivを残りのスペースの中央に配置します。新しいdivを設定float:right;すると、元のdivと単純にオーバーラップします。

これを解決して、元のdivをほとんどのページの中央に配置できるようにするのに、要素を横に配置する場合は横に調整するのが最善の方法は何でしょうか。（または、テーブルまたはインラインスタイルを使用できます:(

ここにjsfiddleがありますhttp://jsfiddle.net/nhaskins/zjZth/

ありがとう。

編集

明確にするために#right、任意の幅に#leftすることができ、残りの幅の中央に配置され、テキストが下をクリア#leftして周りを流れるようなものが必要#rightです。解決策が見つからない場合のフォールバックは#left、インラインスタイルでマージンを上書きして、特定のページに適切に配置することです。

4

2 に答える 2

1

フロートの問題は、その要素が通常のコンテンツ フローから取り除かれ、そこにフロートしているだけで、他の要素とうまく調和しないことです。インライン要素として使用するか、clear:both.

于 2012-05-18T13:21:00.503 に答える
0

jQueryを使用して回答を更新：

http://jsfiddle.net/zjZth/8/

$(document).ready(function(){
    var margin = (($('#content').width() - $('#right').width()) - $('#left').width() ) / 2;
    $('#left').css('margin-left', margin + 'px');
});

元の回答：

私が思いつく最も簡単な解決策は、フローティング右divをコンテンツの外側に配置し、コンテンツにフローティングdivの幅に等しい右マージンを与えることです。

更新されたフィドル：http：//jsfiddle.net/zjZth/6/

HTML：

<div id="right"></div> 
<div id="content">
<div id="left"></div>
<p>Lorem ipsum etc. etc. hkf uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk</p>
</div>

そしてCSSの場合：

#content {
    padding: 5px; 
    margin-right:200px;
}

#right {
    background: rgba(0,0,255,0.8);
    float: right;
    width: 200px;
    height: 200px;
    margin: 5px;
}

#left {
    background: red;
    margin: 5px auto;
    width: 200px;
    height: 120px;
}
于 2012-05-18T13:25:22.293 に答える