1

まず第一に、私は英語をあまり上手に話せず、解決策をうまく説明できるかどうかわからないので、辛抱強く待ってください。それで...

私はこのHTMLを持っています

<div id='container'>

    <div class='picture'>
        <img src='...'>
    </div>

    <div class='description'>
        <div id='attrb1' class='clearfix'>...</div>
        <div id='attrb2' class='clearfix'>...</div>
        <div id='attrb3' class='clearfix'>...</div>
        <div id='attrb4' class='clearfix'>...</div>
    </div>

</div>

clearfixクラスは、ここで説明するように実装されます

.picture divを左側に、.descriptiondivを右側に配置したいと思います。だから私はこのCSSを書きました

.picture { float: left; width: 100px; }
.picture img { width: 100px; height: auto; }
.description { float: right; width: 815px; }

今まで、すべてが大丈夫です。

ただし、画像が表示されない場合もあります。この場合、.descriptiondivがすべての.containerdiv幅に拡張されるようにします。だから私は両方のdivの幅を削除しようとしました：

.picture { float: left; }
.picture img { width: 100px; height: auto; }
.description { float: right; }

ただし、.descriptiondivは.picturedivの下に流れます（画像が存在する場合）

これがスクリーンショットです： 2つの.containerdiv：1つ目は.picture divあり、2つ目は.picturedivなし

4

4 に答える 4

1

http://jsfiddle.net/UQngw/

cssを無効にすると

.clearfix {
    #display: inline-block;
}

display: line-block;divをできるだけ幅にする ように見えます。

更新
まあ、テキストが非常に長いときにコードに問題があることがわかりました...
http://jsfiddle.net/HbCaK/3/ この試行で次のcssを無効にしましたが、これが正しいかどうかはわかりませんあなたの場合に適しています：

.description {
    #float: right;
}
.clearfix:after {
    content:".";
    #display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    #display: inline-block;
}
于 2013-02-01T03:27:57.130 に答える
0

代わりに、.pictureにmin-widthを使用してください。

.picture { float: left; min-width: 100px; }
.picture img { width: auto height: auto; }
.description { float: right; width: 815px; }

imgタグが画像divから削除されると、レイアウトはあなたが求めていると思うように折りたたまれるはずです。

于 2013-01-31T18:11:32.823 に答える
0

float: right;.pictureクラスからを削除します。フロートが残っているため、自動的に隣に並んでいます。

新しいjsfiddleを作成しました：http： //jsfiddle.net/mu2MV/

これにより、コンテンツが大きくなりすぎた場合の垂直スクロールも追加されます。それ以外の場合は、画像の下に表示されて折り返されます。

于 2013-01-31T19:37:28.067 に答える
0

これで問題は解決すると思います。

.picture img { width: 100px; height: auto; }
#container > div:nth-of-type(1){
    float: left;    
}
#container > div:nth-of-type(2) {
    float: right;     
}

http://jsfiddle.net/vYwYe/5/

http://jsfiddle.net/vYwYe/6/

于 2013-02-01T03:48:59.580 に答える