2

2つのdivが並んでいます。最初の1つには、かなり長くなる可能性のあるテキストフィールドが含まれ、もう1つには短い数値が含まれます。

親を伸ばしたり、必要に応じてクリッピングしたりせずに、使用可能なすべてのスペースを占有する最初のdivが必要です。Antは、2番目のdivの幅を考慮に入れる必要があります。したがって、テキストの長さが短い場合は2つのdivを並べる必要がありますが、テキストが長い場合は、最初のdivがクリップされ、2番目のdivが右端までプッシュされます。

おおよそのテーブルレイアウトは次のとおりです。

<div id="container">
    <div id="row">
        <span id="text">Short text</span><span id="value">123</span>
    </div>

    <div id="row">
        <span id="text">A bit longer text</span><span id="value">555</span>
    </div>

    <div id="row">
        <span id="text">A very very very very very very very very long text</span><span id="value">555</span>
    </div>
</div>

そして対応するCSS：

#container {
    border: 1px solid #000000;
    width: 300px;
}

#row {
    display: inline-block;
    border: 1px solid #000077;
    width: 100%;
    clear: both;
}

#text {
    display: inline-block;
    border: 1px solid #007700;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
}

これが私が必要なものを説明するjsfiddleテンプレートです。非常に長いテキスト行をクリップし、同じ行の横に555を配置して、構造全体が指定された300pxに収まるようにする必要があります（数値は任意です。実際には他の要素によって定義され、事前にはわかりません）。 ）。

4

3 に答える 3

1

あなたはおそらくdisplay: table（フィドル）を使うことができます：

#container {
    display: table;
}

#row {
    display: table-row;
}

#text {
    display: table-cell;
}

#value {
    display: table-cell;
}
于 2013-03-18T21:39:07.967 に答える
0

デモフィドル

#text {
    display: inline-block;
    border: 1px solid #007700;
    float:left;
    min-width:80%;
    max-width:80%;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
    float:left;
    max-width:18%;
    overflow:hidden;
}
于 2013-03-18T21:39:34.287 に答える
0

で複数の要素がある場合は、スタイリングをインラインに配置しid="text"ます。を設定しmax-width、を定義し、両方が残っている間ずっとheight設定します。行の間に空白のdivを使用する必要がある場合があります。overflow:hiddenfloatingclear-both

<div id="text" style="overflow:hidden; float:left; max-width:270px; height:22px;">A very very very very very very very very long text</div><div style="float:left;" id="value">555</div>
于 2013-03-18T21:44:38.447 に答える