具有扩展元素的 CSS 列

Question

我想使用 css 列将项目列表排列为三列。当我点击某些项目时，我会使用 JS 来扩展它们，当这种情况发生时，我不希望调整布局来弥补。这可能吗？

$('.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>
	<li>item</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li class="clickme">click me</li>
	<li>item</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<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>
	<li>item</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
</ul>
<ul>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li class="clickme">click me</li>
	<li>item</li>
</ul>
<ul>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li>item</li>
</ul>
</div>

这是我用于列的 CSS：

.box1 ul{
  columns: 200px 3;
}

这里有一个代码笔来说明 - http://codepen.io/anon/pen/YNpJYG

注意：这显然不太理想，但如果可以让 CSS 列根据元素的数量而不是它们的大小来创建列，那可能对我有用。

Answer 1

很遗憾，CSS3 多列布局不允许分别编辑每一列，也无法手动编辑它们的高度。

但是，您可以使用一些属性来显示“clickme”的内容，而不会打乱其他列表元素。使用 'column-span' 将元素跨越所有列，并使用 'column-gap' 删除列之间的空间。

$('.clickme').click(function(){
  $(this).toggleClass('big');
});

/* relevant CSS */
ul{
  display:block;
  max-width:600px;
  list-style:none;
  margin:0;
  padding:0;
}
.box1 ul{
  -webkit-column-count: 3; 
  -moz-column-count: 3; 
  column-count: 3;
  -webkit-column-gap: 0px; 
  -moz-column-gap: 0px; 
  column-gap: 0px;
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
}
.box1 li{
  break-inside: avoid;
}

li{
  display:block;
  background-color:#555;
  color:white;
  border: 1px solid white;
  padding: 4px;
  height: 18px;
}


/* less relevant CSS */
body{font-family: sans-serif;}
.clickme{
  transition: height .5s;
  text-align: center;
  -webkit-column-span: all; 
  column-span: all;
}
.clickme:hover{
  background-color:#999;
  cursor: pointer;
}
.clickme.big{
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<ul>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li class="clickme">click me</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
  <li>wut</li>
	<li>wut</li>
	<li>wut</li>
</ul>
</div>