0

幅と高さが固定された<div>が左に浮かんでいて、その右側に他に2つ<div>のがあります。片方を<div>左に浮かぶ<div>境界線と同じ高さにし、もう片方を少しインデントさせたい。これが私が今持っているものです...

<div 
    id="leftDiv"
    style="border:1px solid grey;
        width:300px;
        height:400px;
        float:left;">
        This is a left floated div with a fixed width and height
</div>

<div id="rightDiv">
    <div id="flushDiv">This should be flush.</div>
    <div id="indentDiv" style="padding:25px">This should be indented.</div>
</div>

しかし、上記のhtmlで何が起こるかというと、idが'flushDiv'と'indentDiv'の両方が、id<div>の右側に対してフラッシュされます。<div>leftSideDiv

に表示された境界線を設定すると、なぜこれが発生するのかわかりますrightDiv。左側は実際にはの左側と同じ高さleftDivです。そして、両方の要素は、私が望む25pxのくぼみの上にすでに十分に埋め込まれているindentDivので、両方ともの右側と同じ高さになりleftDivます。

右に浮くrightDivと、ほぼ希望のインデント効果が得られます。 indentDivはに対してインデントされますflushDivがflushDiv、の右側に対してフラッシュされなくなりましたrightDiv。

わかりました、私はもう自分自身をフォローしているとさえ確信していません。

誰かが私が求めていることを理解し、解決策を持っていますか？私はそれを要約しようとします：

左フロートdivの右側に2つのdivを配置するにはどうすればよいですか？1つは左フロートdivの右境界に対してフラッシュされ、もう1つはオフセットされます。

4

1 に答える 1

2

これはあなたが達成しようとしていることですか？あなたがそれらを見ることができるように私はそれらの周りに境界線を置きます...これはjsfiddle.comの例です

http://jsfiddle.net/hawUs/ 

<div id="leftDiv" style="border:1px solid grey;width:300px;height:400px; float:left;">
    This is a left floated div with a fixed width and height
</div>

<div id="rightDiv" style=" float:left;">
  <div id="flushDiv" style="border:1px solid grey; float">This should be flush.</div>
  <div id="indentDiv" style="padding:25px;border:1px solid grey;">This should be indented.    </div>
</div> ​​​​​​​​​​​​​​​

更新：代わりに使用するようにpaddingdivのを変更することもできます。例を参照してください：http：//jsfiddle.net/hawUs/1/#indentDivmargin

于 2012-12-01T14:55:13.080 に答える