7

更新: すべてのブラウザで動作する最新のコードは、この JSFiddle にあります - https://jsfiddle.net/webvitaly/yu00ugft/5/

純粋な CSS アプローチを使用してレスポンシブ列を作成しようとしています。

列の上部にギャップ/マージンがある場合があるという問題があります。

試して調べるための JSFiddle リンク - https://jsfiddle.net/webvitaly/yu00ugft/

それを解決する方法は？

CSS:

.fx-columns {
  background: yellow;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.fx-columns-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.fx-columns-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.fx-columns .fx-column {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  background: pink;
  clear: both;
  margin-bottom: 20px;
}

HTML:

<div class="fx-columns fx-columns-4">
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
</div>
4

2 に答える 2

20

現在、コンテンツが列間で分割されないようにしています。ただし、ブラウザはmargin列の間を分割するため、一部の列が先頭から開始されません。

これを css に追加します。

.fx-column {
  display: inline-block;
}

次に、列に固定幅を与える必要があります。

ただし、列数の CSS プロパティの使用には多くの問題があることに注意してください。詳細については、この記事を参照してください。

編集:列幅をレスポンシブにしたい場合はwidth: 100%、ブラウザが拡大すると拡大するように設定するだけです。

于 2016-06-24T19:31:22.803 に答える
0

この問題を解決するには、top-margin と top-padding をゼロに設定します。CSS ユニバーサル (*) セレクターを使用できます。

*{padding-top:0; margin-top:0;}

ただし、ユニバーサル セレクター スタイルはページ全体に適用されることに注意してください。

于 2016-06-24T19:13:25.787 に答える