web-dev-qa-db-ja.com

異なる高さの要素をフロートさせる方法は？

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

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

floating wrong

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

floating right

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

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

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

floating different

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

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

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

javascriptjquerycsscss-float
26
matt

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

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

jsFiddleデモ

31
Pevara

@Arieljuodが述べたように、floatの代わりにdisplay: inline-blockを使用できます。これの利点は、すべてのブラウザー（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/

21
My Head Hurts

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

必要なベンダープレフィックスを追加し、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

1
tao

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

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

0
arieljuod

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

0
BK14

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

0
Jack

最初のオプション

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

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

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

0
Matt Coughlin