特定のCSSレイアウトを実現しようとしています。フロートやCSSテーブルなど、多くの可能性を試しましたが、わかりません。CSS テーブルは、いくつかの固定された列と残りのスペースを取るべきいくつかの列があったときに私を大いに助けてくれましたが、これは異なっているようです.
2 つの列が必要です。合わせて、親の 100% 幅にする必要があります。右側の列は、そのコンテンツと同じ幅にする必要があります (つまり、3 つのボタンがあるので、これらの 3 つのボタンと同じ幅にする必要があります)。左の列は、残りのスペースの残りを取る必要があります。それでおしまい。簡単ですね。TeX の世界では "\hfill" と呼ばれていますが、css にそのようなコマンドがあればいいのにと思います。
これが私がこれまでに試したことです：
<section>
<div id="a"></div>
<div id="b">
<button>Bla</button>
<button>Test</button>
<button>Hello</button>
<button>World</button>
</div>
</section>
CSS:
section { display: table; width: 100%;}
div { display: table-cell; height: 100px; border: 1px solid #000;}
#a { width: 100% }
#b{ }
そしてフィドル：
http://jsfiddle.net/fa9FJ/270/
実際、これは私が望むものに非常に近いですが、ボタンは水平方向に隣り合わせにする必要があります。