css - div のサイズを自動的に調整する

Question

私はこのコードを持っていますが、.text期待どおりに動作していません。はコンテナのに収まるはずですが、divautoは2 行目にプッシュされます。画像の幅は変更される可能性があり、画像の幅に関係なく、常に右の div がコンテナーに収まる必要があるため、auto 値が必要です。width.text

<div class="container">
    <div class="img"><img src="http://placehold.it/350x150"></div>
    <div class="text">Some text Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</div>
</div>

.img, .text {
    float:left;
}

.text{
    border: 1px solid red;
    height:150px;
    width:auto; //should be width:248px in this specific case;
}

.container{
    width:600px;
    border:1px solid green;
    height:150px
}

http://jsfiddle.net/LCAKw/

score 3 · Accepted Answer

.textクラスもフロートさせないでください。そうすれば、(親要素の) 全幅からフローティングを引いたブロック要素になります。ただし、左パディングを適用することもできます。

score 0 · Accepted Answer

text予約語のようです。クラス名として使用することはできません。それを変更した後、フィドルはうまく機能します。

変更された CSS:

.text1{
    border: 1px solid red;
    height:150px;
    width:auto;
}

score 0 · Accepted Answer

クラス内の代わりに使用する必要がある使用中のプロパティと、または使用している場合にも使用する必要float:left; がありますwidth:100%;width:auto;.textbox-sizing:border-box;borderspadding

score 0 · Accepted Answer

.text がフローティングではなく、そのレイアウトが経由でくすぐられている場合: http://jsfiddle.net/LCAKw/5/overflow:hidden;のように動作するはずです

css - div のサイズを自動的に調整する

4 に答える 4

Related

Reference