每个列表列的最后一项的不同样式

时间：2018-04-04 13:07:44

标签： javascript jquery html css css3

我正在使用CSS在三个不同的列中划分列表。 列表中的每个项目都有一个底部边框。现在我想隐藏列的每个最后一项的底部边框。

我不知道列表中有多少项，因此无法使用CSS检查每个第二/第三项。

还有其他方法可以添加列的最后一项吗？

这是我的代码：

.list-col-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
.list-col {
    -moz-column-gap: 1.5rem;
    -webkit-column-gap: 1.5rem;
    column-gap: 1.5rem;
}
.list-col li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.card_post {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #b0afaf;
}
<ul class="list-unstyled list-col list-col-3">
	<li class="card_post">
		<h2 class="card-title">
			<span>Title</span>
		</h2>
		<div class="card-text">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</li>
	<li class="card_post">
		<h2 class="card-title">
			<span>Title</span>
		</h2>
		<div class="card-text">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</li>
	<li class="card_post">
		<h2 class="card-title">
			<span>Title</span>
		</h2>
		<div class="card-text">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</li>
	<li class="card_post">
		<h2 class="card-title">
			<span>Title</span>
		</h2>
		<div class="card-text">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</li>
	<li class="card_post">
		<h2 class="card-title">
			<span>Title</span>
		</h2>
		<div class="card-text">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</li>
	<li class="card_post">
		<h2 class="card-title">
			<span>Title</span>
		</h2>
		<div class="card-text">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</li>
</ul>

2 个答案:

答案 0 :(得分：3)

您可以选择整个列表并通过将长度除以3（列数）来计算它包含的行数

然后添加一个for循环来迭代每列的las 3元素并添加一个名为last

的类

希望这有帮助

var list= $('.list-unstyled li');
var rows = list.length/3;;

//Adapt rows when no multiples of 3
if(list.length % 3 != 0)
  rows = Math.round(rows);

for(var i=0;i<=rows;i++){
  last = (i+1)*rows-1;
  if(list[last] == undefined)//Validate if rows no multiples of 3
    last = (i+1)*rows-2;
  list[last].classList.add("last");
}
.list-col-3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

.list-col {
  -moz-column-gap: 1.5rem;
  -webkit-column-gap: 1.5rem;
  column-gap: 1.5rem;
}

.list-col li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.card_post {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #b0afaf;
}

.last{
border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled list-col list-col-3">
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>

</ul>

答案 1 :(得分：2)

一个可能的纯CSS解决方案是通过赋予它position: absolute来制作一种覆盖边界以覆盖边界并使其覆盖底部~30像素左右。如果列表没有纯色作为背景，或者li在height中的差异可能会有很大差异，那么这显然不起作用。

这就是它的样子：

.list-col-3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

.list-col {
  -moz-column-gap: 1.5rem;
  -webkit-column-gap: 1.5rem;
  column-gap: 1.5rem;
}

.list-col li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
  display: block;
  position: relative;
}

.card_post {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #b0afaf;
}

.hide-border {
  background: #ffffff;
  border: 1px solid red;
  bottom: 0;
  height: 40px;
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
}
<ul class="list-unstyled list-col list-col-3">
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="card_post">
    <h2 class="card-title">
      <span>Title</span>
    </h2>
    <div class="card-text">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </li>
  <div class="hide-border">I hide borders</div>
</ul>

相关问题
最新问题