0

K2 コンポーネントを含む Joomla サイトがあります。そして、私は見た目が悪い「問題」を抱えています。画像をご覧ください：

CSS ボックスのフローティング問題

ここに適用されると私が思うcssファイルの一部を次に示します。

/* --- Item groups --- */
div.itemList {}
div#itemListLeading {}
div#itemListPrimary {}
div#itemListSecondary {}
div#itemListLinks {background:#f7fafe;border:1px solid #ddd;margin:8px 0;padding:8px;}

div.itemContainer {float:left;}
div.itemContainerLast {} /* this class is appended to the last container on each row     of items (useful when you want to set 0 padding/margin to the last container) */

/* --- Item block for each item group --- */
div.catItemView {padding:4px;} /* this is the item container for this view - we add a generic padding so that items don't get stuck with each other */

/* Additional class appended to the element above for further styling per group item */
div.groupLeading {}
div.groupPrimary {}
div.groupSecondary {}
div.groupLinks {padding:0;margin:0;}

div.catItemIsFeatured {background:#ddd;border:1px dotted; padding:3px;margin:1px;} /* Attach a class for each featured item */

なので、右サイドが好きです。ありがとうございました！

4

2 に答える 2

0

必要な外観を実現するために使用できcolumn-countます。フロート時とはアイテムの並び順が異なりますのでご注意ください。

浮く：

1 2
3 4
5 6

列:

1 4
2 5
3 6

column-count: 2アイテムの親に設定するだけです。

すべてのブラウザーで機能するとは限らないことに注意してください: http://caniuse.com/#search=column

于 2013-02-23T12:50:31.300 に答える
0

CSS が望ましい結果を達成できなかった理由は、CSS が水平方向の位置のみを気にするためです。つまり、すべてが最初に水平方向に配置され、次に垂直方向に配置されます。したがって、後続の行の次のフロートは、最初の行のフロートの最も高い要素の下にのみ配置されるため、フロートの前の行に高さの短いコンテナーがある場合、垂直方向のスペースは埋められません。

jQuery Masonry をお勧めします:) http://masonry.desandro.com/

于 2013-02-23T12:44:25.247 に答える