2

コンテナには長すぎる html リストがあり、それを分割して余分な項目を別の列に表示したいと考えています。しかし、CSS で列を使用すると、リストが均等に分割されます。私が12個のアイテムを持っている場合、各列に6〜6個のように。しかし、私はこれをしたくありません。代わりに、他の列の余分なアイテムのみを表示したい.

次の図では、9 から 12 までの項目を別の列に表示したいと考えています。

助けてください。

CSS 

.subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 500px;
  height: 350px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

HTML 

<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

この画像を参照してください

ここに画像の説明を入力

画像でわかるように、9 ～ 12 個のリスト アイテムはすぐに使用できます。箱の中に持ち込めません。

4

4 に答える 4

0

提供された情報に基づいて、コンテナはギャップを含む柱を保持するのに十分な幅がないように見え、柱が適切な点で壊れるように高さを計算する必要があります。

次に、列を不均衡にする必要がありますcolumn-fill: auto;

コードペンデモ

.subMenu {
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  width: 500px;
  height: 260px;
  -webkit-columns: 180px;
  -moz-columns: 180px;
  columns: 180px;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}
.subMenu li {
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="subMenu categoryMenu1">
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a>
  </li>
</ul>

代わりに、おそらく Flexbox です。

.subMenu {
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  width: 500px;
  height: 260px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.subMenu li {
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  width: 180px;
}
<ul class="subMenu categoryMenu1">
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a>
  </li>
</ul>

于 2016-03-10T15:38:45.333 に答える
0

2 つの列の項目を半々に分散しないようにするには、 に固定height値を使用できますul。実際にはすでにそれを行っているため ( の css ルールで.subMenu)、その CSS ルールの値を調整してheight、必要に応じて 8 つのリスト項目に収まるようにします。

width(ここでは、スニペット ウィンドウにうまく収まるようにを変更したことに注意してください。これは、実際の状況ではおそらく必要ありません)

subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 300px;
  height: 280px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

于 2021-11-22T17:58:18.493 に答える
0

列プロパティを間違って使用していました。

持っていた：

.subMenu{
...
 columns: 250px;
...
}

このプロパティは、列のサイズを探しているのではなく、生成する必要がある列の数を確認しています (他のプロパティ: w3 CSS3 Columns Propertyと同様) 。

したがって、このプロパティを「2」(または必要な数の列) に変更すると、意図した結果が得られると思います。

フィドル

補足: あなたの質問では、最初の列に 9 行、残りを 2 番目の列に配置したいと言っていました。これを行うための「列」固有の方法が見つからなかったため、ハックとしてコンテナーの高さを調整しました。フィドルの CSS を参照してください。

最後に、@ AhmetEmre90 が提供するリンクには、IE のハックがあります。古いバージョンの IE ではこのプロパティのスタイルが設定されないためです。後世のためにリンクとIEハックを含めています。

コード: @Gabriel: SO- 順序付けられていないリストを 2 列で表示するには?

HTML

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

ジャバスクリプト

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}
于 2016-03-10T15:36:03.217 に答える
-2

詳細については、このリンクcolumnsを確認してくださいのプロパティを使用できます。ul

于 2016-03-10T15:16:06.547 に答える