李向左浮动，长度动态：最后一行没有边框底部

Question

就是这样：

https://jsfiddle.net/rpepf9xs/

我想删除带有选择器的border-bottom：“nth-last-child（）”，但是，如果列表中只有8个“li”，则会出现这样的错误：

ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0
}
li {
  display: block;
  width: 33%;
  height: 120px;
  float: left;
  margin: 0;
  padding: 0;
  border-bottom: #666 1px solid;
  background: #fcc
}
li:nth-last-child(3),
li:nth-last-child(2),
li:last-child {
  border-bottom: 0px
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

有没有办法在没有javascript的情况下解决这个问题？

感谢。

Answer 1

从第四个元素中添加func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) { let originalImage = (info[UIImagePickerControllerOriginalImage] as? UIImage)! let url = info[UIImagePickerControllerReferenceURL] as! NSURL imageData = UIImageJPEGRepresentation(originalImage, 100) as NSData? let data = UploadData() data.fileName = url.lastPathComponent picker.dismiss(animated: true, completion: nil) } 仅clear:both个元素。删除最后一个元素之后的li的边框

＆＃13;

＆＃13;

3n+1

＆＃13;

ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0
}
li {
  display: block;
  width: 33%;
  height: 120px;
  float: left;
  margin: 0;
  padding: 0;
  border-bottom: #666 1px solid;
  background: #fcc
}
li:nth-child(3n+1) {
  clear:both;
}
li:nth-last-child(4) ~ li:nth-child(3n+1), li:nth-last-child(4) ~ li:nth-child(3n+1) ~ li {
  border-bottom: 0px;
}

＆＃13;

＆＃13;

＆＃13;

此代码将移除最后一行的边框底部，无论您有多少利用

<强>阐释： -

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>将是最后一个元素（边框移除应该在此元素之后开始）。

从li:nth-last-child(4)元素开始，我们前往li:nth-last-child(4)元素（系列如4,7,10 ......），边框不应该从那里开始（{{1} }）元素。 li:nth-child(3n+1)是继承兄弟选择器。

Answer 2

是的，因为您遗漏了clear:both。每当玩浮动时，不要忘记添加清除：两者或者如果空间没有很好地解决，它将给出空格错误。

ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0
}

li {
  display: block;
  width: 33%;
  height: 120px;
  float: left;
  margin: 0;
  padding: 0;
  border-bottom: #666 1px solid;
  background: #fcc
}

li:nth-last-child(3),
li:nth-last-child(2),
li:last-child {
  border-bottom: 0px
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <div style="clear:both;"></div>
</ul>

Answer 3

只需将box-sizing: border-box添加到li即可解决问题。对于border-bottom问题，您可以关联nth-child和nth-last-child s：

li:nth-last-child(3):nth-child(3n+1),
li:nth-last-child(2):nth-child(3n+2),
li:nth-last-child(2):nth-child(3n+1),
li:last-child {
  border-bottom: 0px;
}

使用这个清除浮点数在其上下文（参见一个好的example here）之后也是好的：

ul:after{
  content:'';
  display:block;
  clear:both;
}

见下面的演示：

＆＃13;

＆＃13;

ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  width: 33%;
  height: 120px;
  float: left;
  margin: 0;
  padding: 0;
  border-bottom: #666 1px solid;
  background: #fcc;
  box-sizing:border-box;
}
li:nth-last-child(3):nth-child(3n+1),
li:nth-last-child(2):nth-child(3n+2),
li:nth-last-child(2):nth-child(3n+1),
li:last-child {
  border-bottom: 0px;
}

ul:after{
  content:'';
  display:block;
  clear:both;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

＆＃13;

＆＃13;

＆＃13;