2

それぞれ3つの要素の2つの行になる6つの要素があるので、それらを浮かせました。ただし、要素の内容はかなり異なります。1 つの要素の高さが、後続の兄弟要素が左端までフロートするのを妨げると、レイアウトが崩れます。

浮動要素がレイアウトを壊している

CSS の例を次に示します。

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

および HTML:

<figure>
  <img src="http://placekitten.com/150/200?image=1" alt="Kitten 1" />
  <figcaption>Bacon ipsum dolor sit amet short ribs pork chop pork belly spare ribs shoulder tri-tip beef ribs turkey brisket short loin tenderloin ground round. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=2" alt="Kitten 2" />
  <figcaption>Short ribs cow corned beef, beef tenderloin swine biltong short loin. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=3" alt="Kitten 3" />
  <figcaption>Boudin chuck ground round, pig pastrami salami turkey ham hock beef ribs tongue. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=4" alt="Kitten 4" />
  <figcaption>Tri-tip pork loin tongue corned beef shankle ball tip. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=5" alt="Kitten 5" />
  <figcaption>Turkey swine tenderloin spare ribs sausage filet mignon hamburger. Leberkas andouille prosciutto, bresaola tri-tip short loin meatloaf shank pig shoulder spare ribs ribeye. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=6" alt="Kitten 6" />
  <figcaption>Pastrami andouille tongue tri-tip jerky.</figcaption>
</figure>

JSFiddle の例: http://jsfiddle.net/KatieK/5Upbt/

figure要素の 2 行目を最初の 3 つの要素の下に並べるにはどうすればよいですか?

HTML/CSS ソリューションは、JavaScript/jQuery ソリューションよりも適しています。

4

3 に答える 3

3

CSSのみのソリューションはどうですか？次のルールを追加します。

figure:nth-of-type(3n+1) {
    clear:left;
}

jsFiddle の例

于 2013-02-26T20:07:47.037 に答える
3

:nth-child疑似クラスを使用して、4 つおきの要素をクリアできます。

figure:nth-child(4n){clear: left;}

編集：

4nはそれを完全にカットしません。3n + 1 が必要です。

figure:nth-child(3n + 1){clear: left;}

http://jsfiddle.net/jMCng/1/

于 2013-02-26T20:10:01.143 に答える
2

これが私がテストした解決策です：http：//jsfiddle.net/5Upbt/7/

フィギュアのスタイルを変更します

figure { display: inline-block; vertical-align: top; width: 30%; margin-left: 1%; font-size: small; outline: solid #999 1px; }

これは、ここでのより一般的なソリューションに基づいています：http: //jsfiddle.net/bazmegakapa/Ft9d2/

于 2013-02-26T20:21:25.310 に答える