0

コンテナ内に2つのdivが左に浮かんでいます。一部のコンテナーでは、左側のdivが欠落しているため、左側のdivが欠落している場合に、右側のdivがコンテナーの全幅に拡張されるようにします。

以下のコードでは、右側のdivの幅を指定しました。このため、左側のdivが欠落していると、コンテナー全体がいっぱいになりません。

コードは次のとおりです。

HTML：

<div class="box">
    <div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
    <div class="right">... content...</div>
</div>

CSS：

.box{
    width: 300px;    
    border: 1px solid red;
    margin: 0 auto;
    overflow: hidden;
}

.left{
    width: 80px;
    margin-right: 10px;
    float: left;
}

.right{
    float: left;
    width: 210px;
}

JSFiddle： http: //jsfiddle.net/DMFz8/

4

2 に答える 2

4

隣接するセレクターを使用できるため、隣接するセレクターが.rightある場合にのみフロート.leftします。

.rightセレクターとルールを次のように置き換えます。

.left + .right{
    float: right;
    width: 210px;
}

デモ

于 2012-10-12T16:38:02.887 に答える
1

ypuが正確に何を望んでいるのかわかりませんが、これを試してみてください。

<div class="box">
 <div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget ligula sapien, sed tempor felis. Vivamus eget bibendum augue. Sed sit amet nulla lectus. Etiam vitae lacus ipsum. Aliquam malesuada orci nec ipsum pretium fermentum. Fusce libero mauris, convallis ut aliquam et, scelerisque vel turpis. 
</div>

jsFiddle

于 2012-10-12T16:47:16.577 に答える