2

正しい結果に到達する方法についてアドバイスが必要です。ここにサンプルコードがあります。

table-cell垂直方向のセンタリングに達した主な属性を使用しましたが、DIV #box下の中央に配置しませんでしたDIV #wrap。ANCHORの下の垂直方向のセンタリングもありませんDIV #box。ANCHORオブジェクトは、サイズを指定しなくても自動的に整列する必要があります。下の画像ANCHORはサイズが異なる場合があります。

下のすべてのANCHORオブジェクトは、ブロックDIV #boxに分割することなく自動的に整列する必要があります。DIVそこに収まるDIV #boxアイテムが自動的に表示されます。並べ替えは、条件付きサイズおよびアイテム数ではない場合があります。唯一の条件は、の高さと幅ですDIV #box。

例：

ここに画像の説明を入力 ここに画像の説明を入力

主な構造

  • シーケンスANCHORは、指定または数に限定して固定してはなりません。の下のすべての辺が自動的に中央に配置されDIV #boxます。画像サイズを自動調整します。
  • DIV #boxDIV #wrapは、固定の幅と高さを指定して、 の下の中央に水平に配置する必要があります。のコンテンツ全体をDIV #box水平方向と垂直方向の両方で中央に揃える必要があります。ブロックに収まらないものはすべて自動的に非表示になります。

ここに画像の説明を入力

jQueryによる解決もあるかもしれません。

ありがとうございます。

4

1 に答える 1

0

追加の DIV ラッパーでの分離を許可しない場合、ハードコードされていない再利用可能なコードでクリーンに結果を達成することは不可能です。

HTML構造の変更を許可しないことで、開発オプションを制限します（おそらくあなたのせいではありません）。しかし、制限がなければ、この問題を解決する方法は複数あります。

  1. HTML を使用し、小さなオブジェクトをグループ ラップにラップし、CSS を少し使用する
  2. 負のマージンを使用して CSS をハードコーディングし、すべての要素を相対的に配置する
  3. jQuery / JavaScript で同じことを達成しますが、多くの例外と計算があります

HTML の要素には、ブロックとインラインの 2 つのタイプがあるためです。 [ここでは、インライン ブロック要素やその他の型の詳細については説明しません]

要素がブロック型の場合、次の前の要素は次の行にジャンプしますが、要素がインライン型の場合、行にスペースがある場合、次の要素はその隣に整列します。行の高さは、最上位の要素のグループによってではなく、最上位の要素によって決定されます。

ここに画像の説明を入力

それを達成する唯一の方法は、それらをグループにラップすることです。

ここに画像の説明を入力

したがって、CODE では次のようになります。

HTML:

<div id="box">
    <a href="#"><img src="" /><p>TEXT</p></a>
    <a href="#"><img src="" /><p>TEXT</p></a>

    <span id="group">
        <a href="#"><img src="" /><p>TEXT</p></a>
        <a href="#"><img src="" /><p>TEXT</p></a>
        <a href="#"><img src="" /><p>TEXT</p></a>
    </span>
</div>

CSS:

#group {
    display:inline-block;
    vertical-align: middle;
}
#group > :first-child {
   display:block;
}

jsFiddle の RESULT

于 2013-08-07T11:38:36.340 に答える