0

CSSには、テーブル内の（固定幅）列の量を自動的に設定して、それらが含まれるdiv要素の幅を満たすようにする方法がありますか？

たとえば、画面が狭い場合、テーブルのレイアウトは次のようになります。

。。。
。。。
。。。
。。。

ただし、少し広くすると、テーブルのレイアウトは次のようになります。

。。。。
。。。。
。。。。

これの使用例は画像ギャラリーの場合ですが、テーブルを使用するよりも簡単で簡単な方法があれば、私はすべての耳です。

PS：私はjavascript / jqueryのものの量を最小限に抑えようとしているので、それを使用しないソリューションを好みます。

4

2 に答える 2

4

ではありませんが、次の<table>ような要素を使用できます。

<div id="gallery">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  ...
</div>

そしてCSS：

#gallery>div {
  display:inline-block;
  vertical-align:top;
  width:80px;
  height:80px;
}

それらはテキストのように扱われ、それに応じて折り返されます。それらは同じサイズであるため、結果はグリッドになります。さらに、これは除算可能な数を持っている必要がないことを意味します。たとえば、素数の要素がある場合、それらから適切なテーブルを作成することは不可能です。ただし、ここでは、この文の最後の単語が最後の行の先頭にあるように、処理されます。

于 2012-12-28T16:53:07.187 に答える
1

いいえ。ただし、レスポンシブフォトグリッドの例を次に示します。

シームレスレスポンシブフォトグリッド
http://css-tricks.com/seamless-sensitive-photo-grid/

于 2012-12-28T16:56:40.237 に答える