0

これが私のhtml/cssコードです。上の行よりも少ない要素を含む最後の行が得られるまで、境界線を水平に移動してください。

http://jsfiddle.net/wb5kT/

問題はここから始まります。全体を水平方向に中央揃えにしたいので、ページの境界線からテキストまでの左右の距離は同じになります。ただし、表示されている最後の行は左に揃える必要があります。ビューポートの幅や要素の総数は事前にわかりません。

「text-align: left」を .images に追加すると、最後の行の要素が左に揃えられますが、「中央揃え」全体が壊れます。例: http://jsfiddle.net/dgLQC/1/

テーブルを使わずにそれを行うことはできますか？

IE 8 以下および古いバージョンの他のブラウザは無視できます。

4

3 に答える 3

0

入れfloat:leftます.thumb。

これを参照してください、http：//jsfiddle.net/C5Pev/

アップデート：

私の悪い、上記のコードは期待どおりに機能していません。考えられる回避策は次のとおりです。

http://jsfiddle.net/C5Pev/7/

于 2012-05-13T20:06:49.340 に答える
0

あなたの質問を正しく理解したかどうかはわかりませんが、最後の行 (2 つの div) 内のテキストを左に揃え、他のすべてのテキストを中央に配置する必要があるようです:

そのためにクラスを適用できます：

.alignLeft {
    text-align: left;
}

そして、そのクラスを最後の 2 つの div に与えます。

これがフィドルの例です！

編集:

あなたの質問は言い換える必要があります。それはあなたの目標が何であるかについて間違った結論につながっていますが、これはあなたが探しているものですか:

このフィドルの例を見てください!

関連する CSS の更新:

.thumb {
  float: left;              // align divs to the left of each other
  text-align: center;       // center text inside the div
  position: relative;
  border: 1px solid #D9D9D9; // view the blocks, not needed
  margin: 1px;               // get some distance between blocks, not needed
  font-size: 10px;           // small text to view that's centered, not needed
}

ヒント:行ごとに 3 ブロックになるまで水平方向に縮小します。したがって、最後の行に I am というテキストを含む 2 つの div があります。最後列に一人。

于 2012-05-13T20:11:03.150 に答える
0

テーブルを使用してもこれを行うことはできないと思います。コンテナに対して幅が広すぎるコンテンツがあると、コンテンツがたまたま小さい幅に収まるように折り返されていても、コンテナはその親の幅を想定します。

ところで、要素の不完全な最後の行 (複数の行を想定) があることを確認するには、素数の要素を選択します。

于 2012-05-13T20:54:41.317 に答える