2

私はWP 3.5.1 ATMで作業しています。私の目標は、記事の幅を 300px にし、左にフロートさせてから、行を垂直方向と水平方向に並べて互いの真下に積み重ねることです。私が抱えている問題は、2 行目に到達したときに、最初の行の真下に垂直に整列せず、水平に整列することです。これにより、最初の行の 1 つの記事が長く、他の記事が短い場合、1 行目と 2 行目の間に大きな垂直方向のギャップが生じることがあります。

私はこれまでこのレイアウトを試したことがないので、持っているものからいくつかの指針を得ることができるかどうか疑問に思っています. どうすればこれを実現できますか? それともチュートリアルサイト？私はそれをグーグルで調べましたが、方法については何も見つかりませんでした。

私の目標の例は mysocialcloud.com、new.myspace.com、so.cl で、特にこれはhttp://www.eleventhemes.com/gridly/です。

ありがとう。

4

2 に答える 2

1

CSS3 を使用しても構わない場合は、すべてのコンテンツを div でラップしてから、列 CSS を使用できます。

-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;

Fiddle http://jsfiddle.net/DVfGPを作成しました。

列 css を含む div を作成し、次に各要素を含む div を作成しました。要素に次の css を適用しました。

display: inline-block;
width: 100%;

これにより、すべての要素が同じ列に保持されます。それがあなたが求めていたものであることを願っています。

于 2013-03-17T18:43:47.777 に答える
1

あるいは、より優れたクロスブラウザー互換性を提供する JS ベースの方法を探している場合は、jQuery Masonryを試してください。

通常どおり要素をフロートしますが、Masonry は絶対配置によって利用可能なスペースに従って要素を再配置します。

于 2013-03-17T19:24:31.460 に答える