6

次の jsfiddle を見てください。

http://jsfiddle.net/tTNNm/

CSS でdiv.text幅をハードコーディングせずに、画像 div の横にフロートさせるにはどうすればよいですか?div.text

div はコンテンツの全幅であると想定されており、高さは、その親要素の幅の制約により、次の行に折り返す必要があるコンテンツの量によって決定されると想定されています。それで、私のフィドルではdiv.text、200pxの計算された幅で画像のdivの隣に収まるのではなく、どのようにして300pxの幅全体を取り、次の行に強制するのですか?

参照：

<div class="test">
    <div>
        <img src="http://www.cadcourse.com/winston/Images/SoccerBall.jpg" width="100" height="100"/>
    </div>
    <div class='text'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>​

div.test {
    width: 300px;
    outline: 1px solid blue;
    height: 100px;
}

div.test div {
    float: left;
    outline: 1px solid red;
}

</p>

4

2 に答える 2

7

これは、両方の div が を継承しているためfloat: left;です。これを CSS に追加してみてください。

div.test div.text {
    float: none;
    outline: 1px solid red;
}
于 2012-04-17T21:39:31.353 に答える
0

このコードは、テキストが画像を包み込まないようにしますが、それに応じて div を「サイズ変更」するだけです (幅 100 ピクセルの画像を想定)。

HTML

<div class="test">
    <div class="image">
        <img src="http://www.cadcourse.com/winston/Images/SoccerBall.jpg" width="100" height="100"/>
    </div>
    <div class='text'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS

div.test {
    width: 300px;
    outline: 1px solid blue;
    height: 100px;
}

div.test div.image {
    float: left;
    outline: 1px solid red;
}
div.test div.text {
    outline: 1px solid orange;
    padding-left:110px;
}
于 2012-04-17T21:47:43.410 に答える