2

jQuery columnizer のスクリプトを作成しました。1 つの注目すべき例外を除いて、すべてが正常に機能します。

列数を 3 に固定し、パディングを 10px に増やしたいと考えています。現在のレイアウトでは、成形後の柱の締まり具合に満足できません。

CSS を使用してパディングを調整すると、最後の列が押し出されてキックダウンされます。

コード：

<script>
$(function(){
        $('#sectionID').columnize({ columns: 3 });
});
</script>
<style type="text/css">
.column{padding:10px; }
</style>

アイデアやヒントはありますか？

ありがとう！

/ブライアン

4

2 に答える 2

2

この問題を解決するために私が見つけた最善の方法は、代わりに列内の要素にパディングを追加することです。持っているコンテンツによって異なります。列内に段落しかない場合は、ルールを変更する.column pだけで十分です。

最も簡単な解決策は、子セレクターを使用して、列内の項目にパディングを追加することです。

.column > * { padding: 10px }

これは、列のパディングに対する人々のニーズの90％で機能するはずですが、列の子に追加されるため、列だけでなく各要素にも上/下のパディングが追加されることに注意してください-これは望ましくない場合があります.

別のオプション (追加のマークアップが必要) は、列化するコンテナーに div を追加し、その新しい div にパディングを追加することです。したがって、代わりに：

<div id=sectionID>
... content to columnize ...
</div>

あなたが持っているでしょう：

<div id=sectionID>
<div class=for_padding>
... content to columnize ...
</div>
</div>

CSS は次のようになります。

.column .for_padding { padding: 10px; }

引き続きsectionIDdiv を列化すると、列化機能が<div class=for_padding>各列の内側をラップして追加します。

于 2012-08-12T05:38:35.963 に答える
1

あなたは単に使用することができます

box-sizing: border-box;
padding: 0 4%;

あなたの列のために。容器の左右の隙間が嫌な場合は追加

margin: 0 -2%;

あなたのコンテナに。

于 2014-07-17T14:40:45.353 に答える