0

div可変幅の があり、この div 内に可変量の子があります。中のスペースを子どもたちに埋めてもらいたいdivdiv私は最初にtodisplay:tableと子をto に変更しようとしましdisplay:table-cellたが、すべての子がすべてのスペースを埋めてしまい、それらのwidthandmax-widthプロパティに従わなくなりました。次に、テーブル アプローチを試してみdivましtableた。すべての子セルがスペース全体を埋めますが、左に揃えます (子を設定しましたs ):trtddivdisplay:inline-block

ここに画像の説明を入力

配置を に変更すると、次のcenterようになります。

ここに画像の説明を入力

それらは中央に配置されていますが、親の左右にまだスペースがあります(区別するために設定した黄色の背景があります)。私が実際に欲しいのはこれです:

ここに画像の説明を入力

tdテキストを左に、2 番目を中央に、3 番目を右に配置するように設定することで、これを実現しました。しかし、これらのサムネイルがもっとあるかもしれないので、一般的な解決策が必要です。

最初の要素がコンテナーの正確な左端から始まり (2 番目の画像とは異なり)、最後の要素がコンテナーの正確な右端で終わるように、コンテナー内に可変数の子をレイアウトして幅を埋めるにはどうすればよいですか? (3番目の画像に示されているように)?

4

1 に答える 1