19

css で div の後に改行を防ぐ方法はありますが、1 つの div 最小幅ともう 1 つの最大幅を持つ方法はありますか?

たとえば、私は

<div class="label">My Label:</div>
<div class="text">My text</div>

次のように表示します。

My Label: My text

私のテキストは右に浮いていて、私のラベルは残りの幅をすべて取っていますか?

次の CSS を使用していますが、.text div はラップし続けます。

div
{
    display: inline-block;
}

.label {
    border:1px solid blue;
    width:100%;
}

.text {
    border:1px solid red;
float:right;
}

**更新: JS フィドル * http://jsfiddle.net/jPrMG/

ご協力いただきありがとうございます

4

2 に答える 2

28

あなたが見ているのは「改行」ではありません。これは、<div>要素がデフォルトで要素であるためですblock。

同じ行に表示されるように動作を変更したい場合は、次のdisplayように CSS でプロパティを変更できます。

display:inline;

また

display:inline-block;

それでも（質問に記載されているように）所有widthまたはmin-width所有したい場合は、これら2つのうち後者が必要になりますinline-block。

それが役立つことを願っています。

于 2013-07-31T14:37:31.980 に答える
12

CSS テーブル モデルを使用できます。

.label {
    border:1px solid blue;
    display: table-cell;
    width: 100%;
}

.text {
    border:1px solid red;
    display: table-cell;
    white-space: nowrap;
}

フィドル

于 2013-07-31T14:50:25.257 に答える