2

私は現在、複数の<DIV>要素を垂直方向にソートする必要があるだけでなく、応答性を維持する必要がある設計に取り組んでいます。

例:

より広いレイアウト

より広いレイアウト

背の高いレイアウト

背の高いレイアウト

私はフロート、インラインブロック表示を使用し、jQuery で大まかにまとめることに頼りましたが、すべての要素は水平方向に並べ替えられます。

周りを見回しても、同じ問題や解決策を持っている人は他に見つからないようです。

4

2 に答える 2

4

クロスブラウザのサポートについてあまり心配していない場合 (そして、準拠/最新のブラウザでよりきれいにしたい場合)、または何らかの JavaScript shim を使用して、他のブラウザでのサポートを有効にすることに満足している場合を使用column-widthして列の幅を定義し、ブラウザがそれらの列をリフローしてコンテンツに対応できるようにすることができます。

.gridbox {
    display: block;
    -webkit-column-width: 4em;
    -moz-column-width: 4em;
    -o-column-width: 4em;
    -ms-column-width: 4em;
    column-width: 4em;
    /* aesthetics, adjust to taste,
       only the above is important */
    margin: 1em auto;
    padding: 1em;
    border: 1px solid #f90;
    border-radius: 1em;
}

JS フィドルのデモ。

デモの目的で要素を使用liしたことは明らかですが、必要に応じてこれを要素に直接転送することもできます。上記の要素と同じ方法で親/コンテナーをスタイルし、子要素を好きなようにスタイルするだけです。uldivul

参考文献:

于 2012-10-21T12:58:44.177 に答える
0

HTML構造を少し変更する必要があります。そのためには、コンテンツを「グループ化」するサブコンテナをメインコンテナに含める必要があります。このようなもの：

// first example
<div id="main">
  <div class="group2">
    <span>1</span>
    <span>2</span>
  </div>
  ...
</div>

// second example
<div id="main">
  <div class="group3">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  ...
</div>

cssでグループコンテナの幅を制限すると、おそらく望ましい効果が得られます。

于 2012-10-21T11:43:14.520 に答える