0

コードを抽出してここに投稿するのは難しいため、私の問題を示すサンプル サイトを投稿します。この問題を解決する方法はいくつかありますが (HTML の変更、CSS + HTML の変更、CSS + JS の変更)、私は web コーディングの初心者なので、ここでの攻撃の最良の計画。

とにかく、問題：

こちらをご覧ください: http://321cart.com/sellya/

カテゴリナビゲーション メニューを開くと、次のようになります。

ここに画像の説明を入力

カテゴリの下にあるこれらのリンクにはすべて、ul多くの が含まれていますli。リストを分割し、複数の列のリストを広げて、1 つの列に最大 3 つしか存在しないようliにしたい。これが私がやりたいことの例です：

ここに画像の説明を入力

これは私が望む全体的なものです：

ここに画像の説明を入力

これにより、メニューの幅が増加します (理論的には実質的に 2 倍になります) が、私にとっては問題ありません。これは自分で対処できます。

これを行うにはいくつかの方法がありますが、CSS の変更のみを使用してこれを行う方法があればよいと思います。そうでない場合は、CSS と JavaScript の変更によるものでしょうか? 最後の手段として、実際の HTML コードへの変更を保留したいと考えています。これは、変更したくない元の PHP HTML 生成 OpenCart コードであるためです。

私は自分でこの問題を解決しようとしましたが、少し複雑であることが判明したことに注意してください..だから、私が試みなかったとは思わないでください..第二に、これをJSFiddleに投稿するのは困難でした.実際の問題を完全に表しているわけではないため、サンプル サイトへのリンクを掲載しています。

皆さん見てください。サイト: http://321cart.com/sellya/

だから私は困惑しているこの問題に対するいくつかの答えが必要です.

編集：

これを指摘するのを忘れていました。私が提供した例では、すべての sulにそれぞれ 3 つ以上の sがありましたが、私の実際のケースでは、それぞれ3 つ以上の s があるのliはごくわずかであり、それらを 2 列に拡張したいだけで、列が 1 になるのではありません。それぞれ2〜3秒。ullili

4

3 に答える 3

2

CSS3 は列を導入しました。理論的には、高さとcolumn-widthを に適用するだけulです。実際には、 にベンダー プレフィックスを使用して、 、 などを指定する必要がある場合がありますcolumn-width。-webkit-column-width試し-moz-column-widthてみてください。

于 2013-09-22T19:53:47.937 に答える
0

これを見てください：

var $columns = $("#columns");
var $longlist = $("#longlist");
var columnscount = 3;

//calculate sigle column size
var columnsize = Math.ceil($("p", $longlist).size() / columnscount);

//iterate number of columns, take [columnsize] elements, move them to div#columns and wrap with div.column
for (var i = 0; i < columnscount; i++) {
    $("p:lt(" + columnsize + ")", $longlist).appendTo($columns).wrapAll("<div class='column'/>")
}

3 つの要素よりも短いリストの分割を避けるために、いくつかの条件を追加する必要があります。

これがその仕組みです： http://jsfiddle.net/hGWjd/

于 2013-09-30T12:33:22.533 に答える