html - 動的な 3 つの可変幅の列の HTML レイアウト

Question

似たような記事が無数にあることは知っていますが、何時間も費やしてすべてを試してみましたが、役に立ちませんでした。3 つの列が必要であり、各列が必要なだけのスペースを使用できるようにする必要がありますが、コンテナー全体が固定 (この例では 500 ピクセル) を超えないようにします。左の列は常に左に、右の列は常に右にフラッシュする必要があります。多くの場合、左および/または右の列は空で、中央は幅全体を使用する必要があります。

固定レイアウトのテーブルまたは固定サイズの div でこれを確実に実現できますが、同じコンテナーを動的に再利用して 1、2、または 3 列のデータを表示し、使用可能な幅全体を使用できるようにしたいと考えています。列 1 と列 3 の内容を修正しても問題ありませんが、役に立たないようです。

次に例を示します。

<div style="width:500px;background:#ff0000;max-width:500px;">
    <div style="background:#00ff00;float:left;display:table-cell;">
          col1
    </div>
    <div style="background:#ff00ff;float:left;display:table-cell;overflow:hidden;text-overflow:elipsis;white-space:nowrap;">
          REALLY LONG DO NOT EXCEED 500 - WIDTH COL 1 AND COL2 SOMEHOW WOULD BE NICE
    </div>
    <div style="background:#00ffff;display:table-cell;float:right;">
          col3
    </div>
</div>

申し訳ありませんが、画像を投稿できないため、上記の出力を表示できません。