0

これは で実行できることはわかっていますがcolumns、IE をサポートする必要があります。

ガターが流動的で、列がすべて固定幅であるレイアウトに到達しようとしています。

これをフロートで機能させることができなかったので、正当化されたinline-blockアイテムを使用することにしました：

HTML

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <!-- more divs... -->
</div>

CSS

.wrapper {
    text-align: justify;
}

.wrapper div {
    width: 100px;
    display: inline-block;
}

これはうまく機能しますが、divs の最後の行はすべて左に揃えられています: http://jsfiddle.net/EsHh3/

div私が見つけた唯一の解決策は、不要なsを追加することです: http://jsfiddle.net/EsHh3/1/

このままではダメなので、他に方法があれば教えていただきたいです。

車輪を再発明しないように言わないでください。流体ガターをサポートする流体グリッド システムは見つかりませんでした。

4

4 に答える 4

1

あなたがやりたいことについては、現時点では CSS のみのソリューションは利用できません。IE8 で動作させたい場合はなおさらです。

（a）リストとしてHTMLソースにあるアイテム（b）利用可能なスペースに応じて可変数の列（c）コンテナの幅に応じて列の間隔を設定したいので、必要なソリューションは少なくとも少しのjavascriptを採用する。

他の回答で提案されているフレームワークを検討してください。私が一緒に仕事をしたことがあり、あなたが望むことをすることができるのはMasonry (または有料の兄の Isotope) です。( Masonryの非 jQuery バージョンもあります)。ページのサイズが変更されたときに、目的のガターを再計算し、フレームワークを再構成する関数を考え出す必要があります。x = コンテナーの幅とアイテムの幅に基づいて 1 行に収まるアイテムの数を計算し、残りのスペースを x-1 で割るという行に沿ったもの。

マークアップに余分な DIV を追加するという考えに固執したい場合は、サイズ変更イベントをリッスンしDIV、幅と 1 行に収まるアイテムの数に基づいて、必要に応じて を追加することもできます。

すべての基準に適合しなかった元の回答。

最後の行が全幅に拡張されない理由に依存しているのでtext-align: justified、最後に改行がないためです。これを実現するために、ルールを含む要素を追加しwrapper:after {}ます。これは、幅 100% のインライン ブロックでもあるため、改行が保証されます。

フィドルを見る

CSS は次のようになります。

.wrapper {
    text-align: justify;
    width: 380px;
    margin: 0 auto;
}

.wrapper div {
    width: 100px;
    display: inline-block;
}

.wrapper:after {content: ''; width: 100%; display: inline-block; background: pink; height: 2px; overflow: hidden}

要素がどこにあるかを確認できるように、ピンクの背景があることに注意してください。余分な要素またはラッパーの境界線/マージン/パディングをいじって、後に続くコンテンツが余分なマージンを得ないようにする必要があるかもしれwrapperません。残念ながら、クロムでは、おそらく最後のDIV要素と偽の要素の間に余分なスペースがあるため、最後の行の項目にわずかなずれがあります。

于 2013-02-12T02:26:43.073 に答える
0

なぜ流体ガターが必要なのかわかりませんが、簡単なグリッドのサンプルがあります。これを見て、css を見たい場合は、codepen サイトの SCSS をクリックしてください。また、学習中の場合、このサンプルは独自のグリッドを作成するための非常に良い出発点です。また、車輪の再発明を避けるために、さまざまなグリッド フレームワークを試してみることをお勧めします。CSSグリッドフレームワークをグーグルで検索してください。

于 2013-02-12T01:23:59.950 に答える
0

あなたはこれを試すことができます：

 .wrapper {
    text-align: justify;
    width: 380px;
    margin: 0 auto;
    moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

更新された URL

于 2013-02-12T01:24:49.213 に答える
0

これは私がそれを行う方法です：http://codepen.io/jeremychurch/pen/wmtJz

.container {
  display: table;
  width: 100%; }
.cell {
  display: table-cell; }
.content {
  width: 15em;
  margin: 0 auto; }

<div class="container">
  <div class="cell">
    <div class="content">
    </div>
  </div>

  <div class="cell">
    <div class="content">
    </div>
  </div>

  <div class="cell">
    <div class="content">
    </div>
  </div>
</div>
于 2013-02-12T17:24:38.927 に答える