27

4列に複数のアイテムを並べて表示するレスポンシブウェブデザインに取り組んでいます。これらのアイテムは高さが異なるため、フローティングは適切に機能しません。

これが現時点で起こっていることです：

間違って浮いている

要素をそのように浮かせる方法に関するアイデア：

右に浮かぶ

これはjQueryの「石積み」で機能するはずですよね？ただし、私はZepto.jsを使用しており、jQueryプラグインは機能しないと思います。

そのための純粋なCSS（CSS3）の方法はありますか？いくつかのトリックかそこら？

これが純粋なCSSまたはJSで機能しない場合は、次のようにすることができます。

異なるフローティング

これで、要素5、6、および7を含む2番目の行は、期待どおりに「実際に」フローティングではありませんが、内部に隠し改行（clearfix）があります。

純粋なCSSでそれを行う方法はありますか？たとえば、 ？を使用して改行を適用するnth-child(4n+4)ような疑似セレクター:aftercontent

それについて何かアイデアはありますか？それを機能させるための巧妙なトリックはありますか？

4

8 に答える 8

35

5つおきの要素にクリアを適用して、左端から開始するように強制することができます。css3では次のようになります。

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddleデモ

于 2012-08-04T20:53:04.007 に答える
21

@Arieljuodで述べたようdisplay: inline-blockに、の代わりに使用できますfloat。これの利点は、すべてのブラウザー（IE7 +と以下のハックを含む）で動作し、完全に流動的であることです。

div {
    ...
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0.3em;
    *display: inline;
    *margin-right: 0.3em;
    *zoom: 1;
    ...   
}

実例： http： //jsfiddle.net/cRKpD/1/

于 2012-08-04T22:04:26.967 に答える
1

私はパーティーに遅れていることを知っていますが、誰かがこの質問を別の同様の質問にリンクしたところ、これがフレックスボックスソリューションを見逃していることに気付きました...
（質問が行われたときはありませんでした）。

必要なベンダープレフィックスを追加し、CSSで不要なものを削除します

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

example

于 2016-02-21T03:07:04.910 に答える
0

2番目のオプションでは、「float：left」の代わりに「display：inline-block」を使用します。これをtext-align：centerと組み合わせて、最後の行を除いて常に100％塗りつぶすことができます。

最初のオプションでは、1と5をonwコンテナに入れ、2と6を別のコンテナに入れて、1つにすると、それらのコンテナをフロートさせることができます。

于 2012-08-04T21:46:18.463 に答える
0

最後の1つは、4つの各グループをコンテナーで囲むことができます。次に、divをコンテナー内にフロートさせます。これを手動で実行したくない、または実行できない場合は、JavaScriptを使用してこれを簡単に実行できます。

于 2012-08-04T22:04:24.333 に答える
0

最初のオプション

CSSの複数列のレイアウトは、適切に標準化されてサポートされると、これを行うための柔軟な方法を提供する可能性があります。

頭に浮かぶ他の唯一のCSSソリューションは、十分な応答性がない場合もありますが、要素を列コンテナー（1と5、次に2と6、次に3と7、次に4）にグループ化することです。

これらの2つのオプションとは別に、JSが必要だと思います。

于 2012-08-04T22:51:20.087 に答える
0

少し遅れますが、追加の仕切りに1を入れます。次に、その仕切りに7を入れます（7が1の下に表示されるように仕切りを調整する必要があります）。この仕切りでoverflow：visibleを使用すると便利な場合があります。

于 2014-10-08T08:04:12.860 に答える
0

私は次のようにjQueryを使用してそれを行います：

var max_height = divs_cnt = 0;

$("#holder .box").each(function() {
  if (divs_cnt % 4 == 0) {
    $(this).css("clear", "both");
  }
  if (max_height < $(this).height()) {
    $("#holder .box").height($(this).height());
  }
  max_height = $(this).height();
  divs_cnt ++;
})
#holder{
   width:100%;
   border:1px dotted blue;
   display:inline-block;
}
.box{
   width:100px;
   height:150px;
   background-color:#CCC;
   float:left;
   text-align:center;
   font-size:45px;
   display:inline-block;
}
.one{
   background-color:#0F0;
   height:200px;
}

.two{
   background-color:#0FF;
}

.three{
   background-color:#00F;
}

.four{
   background-color:#FF0;
}

.five{
   background-color:#0a1;
}

.six{
   background-color:#ec5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="holder">
    <div class="box one">1</div>
    <div class="box two">2</div>
    <div class="box three">3</div>
    <div class="box four">4</div>
    <div class="box five">5</div>
    <div class="box six">6</div>
</div>

于 2020-12-30T16:08:16.387 に答える