div
可変幅の があり、この div 内に可変量の子があります。中のスペースを子どもたちに埋めてもらいたいdiv
。div
私は最初にtodisplay:table
と子をto に変更しようとしましdisplay:table-cell
たが、すべての子がすべてのスペースを埋めてしまい、それらのwidth
andmax-width
プロパティに従わなくなりました。次に、テーブル アプローチを試してみdiv
ましtable
た。すべての子セルがスペース全体を埋めますが、左に揃えます (子を設定しましたs ):tr
td
div
display:inline-block
配置を に変更すると、次のcenter
ようになります。
それらは中央に配置されていますが、親の左右にまだスペースがあります(区別するために設定した黄色の背景があります)。私が実際に欲しいのはこれです:
td
テキストを左に、2 番目を中央に、3 番目を右に配置するように設定することで、これを実現しました。しかし、これらのサムネイルがもっとあるかもしれないので、一般的な解決策が必要です。
最初の要素がコンテナーの正確な左端から始まり (2 番目の画像とは異なり)、最後の要素がコンテナーの正確な右端で終わるように、コンテナー内に可変数の子をレイアウトして幅を埋めるにはどうすればよいですか? (3番目の画像に示されているように)?