3

私のコードには、実際には変更できない複雑な階層構造があります。これは、外側の div 内に画像を含むインライン ブロック div のコレクションです。このようなもの：

<div> <!-- text-align: center -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <!-- ... -->
</div>

ユーザーのブラウザ ウィンドウに基づいて画面いっぱいにこれらの画像が必要です。また、画像自体も左揃えにする必要があります。つまり、ブラウザーが 1 行に 5 つの画像を表示でき、最後の行に画像が 1 つしかない場合、その画像は中央ではなく、ずっと左に配置する必要があります。ただし、グループ全体を中央揃えにする必要があるため、右側に大きな白い余白はありません。

階層に別の div を追加しようとしました。次のようなものです。

<div><!-- text-align: center -->
    <div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <!-- ... -->
    </div>
</div>

インラインブロックであるにもかかわらず、中央の div が全幅になるため、これは機能しません。例はここにあります: http://jsfiddle.net/cwmRw/

どうすればこれを行うことができるかについてのアイデアはありますか? ありがとう！

4

3 に答える 3

2

jQuery の使用が許可されている場合の実用的なソリューションは次のとおりです。
http://jsfiddle.net/cwmRw/6/

ウィンドウのサイズが変更された場合は、幅を動的に計算し、img-sub-container再計算します。

img-sub-container純粋な CSS ソリューションの場合、 (ピクセル、パーセンテージ...)の幅を知る必要があります。

高さとは異なり、幅はブロック レベルの要素で可能な限り左右に拡張されます。 インライン要素

を作成する場合、たとえば byとしましょう。 必要な幅がわからないため、動的に計算して設定する必要があります。img-sub-containerdisplay:inline-block;widthmargin: 0px auto;

于 2013-04-10T01:23:07.423 に答える