0
css列を使用して項目のリストを3列に配置したいと考えています。特定のアイテムをクリックするとJSを使用して展開しますが、そのときはレイアウトを調整して補正する必要はありません。これは可能ですか？要素が展開されたCSS列
$('.clickme').click(function(){
$(this).toggleClass('big');
});/* relevant CSS */
ul{
display:block;
max-width:640px;
list-style:none;
margin:0;
padding:0;
}
.box1 ul{
columns: 200px 3;
}
.box1 li{
break-inside: avoid;
}
.box2 ul{
width: 200px;
float: left;
}
li{
display:block;
background-color:#555;
color:white;
border: 1px solid white;
padding: 4px;
min-height:1px;
}
/* less relevant CSS */
body{font-family: sans-serif;}
.clickme{
transition: min-height .5s;
}
.clickme:hover{
background-color:#999;
cursor: pointer;
}
.clickme.big{
min-height:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="box1">
<h3>I don't want this - when an element expands the other elements rearrange themselves.</h3>
<ul>
\t <li>item</li>
\t <li>item</li>
\t <li>some of these items are longer than others</li>
\t <li>item</li>
\t <li>some of these items are longer than others</li>
\t <li>item</li>
\t <li class="clickme">click me</li>
\t <li>item</li>
\t <li>item</li>
\t <li>some of these items are longer than others</li>
\t <li>item</li>
\t <li>item</li>
</ul>
</div>
<div class="box2">
<h3>This is what I want - when an element expands the other elements stay put. I'm using multiple lists for this though, and I'd like to use just one list if possible.</h3>
<ul>
\t <li>item</li>
\t <li>item</li>
\t <li>some of these items are longer than others</li>
\t <li>item</li>
</ul>
<ul>
\t <li>some of these items are longer than others</li>
\t <li>item</li>
\t <li class="clickme">click me</li>
\t <li>item</li>
</ul>
<ul>
\t <li>item</li>
\t <li>some of these items are longer than others</li>
\t <li>item</li>
\t <li>item</li>
</ul>
</div>ここで私は列のために使用していCSSです：
.box1 ul{
columns: 200px 3;
}
は、ここで説明するcodepenだ - http://codepen.io/anon/pen/YNpJYG
注：これは明らかに少ない理想的ですが、 CSSの列に要素の数に基づいて列を作成することは可能ですサイズ、それは私のために働くことができます。
あなたが提供した例で持っているとして残念ながら、あなたがやりたいための唯一の方法は、複数のリストです。各列に一定数の要素を設定する方法はありません。 – Callum