Question

（请参阅下面的实际问题，如果您需要更多解释，请阅读上面的说明。）

在CSS中，：last-child和：first-child给了我很好的选择。表格附带，强文本和更多我可以使用CSS选择器定位的标签，因此使用这些工具可以很容易地在桌子的所有单元格周围放置一个合适的边框，而不会在任何一侧出现双边框。

将它应用到DIV列表中，每个DIV出现在另一个下面，这也很简单，因为我需要做的就是删除最后一个孩子的底部边框。

可是：

当我使用一个彼此浮动的DIV列表时，例如，连续3个（在它们的宽度总和超过目标容器的宽度并导致它们换行之前），我总是最终得到某些方面有一些双重边界。

这是否有一个干净整洁的CSS解决方案？

Answer 1

我认为您正在寻找的解决方案是不可能的。当您使用表格时，浏览器可以理解td和th元素都属于同一个tr，并提出了一些简单的规则来确定它们作为一个组的外观

另一方面，Divs是高度变体的（理所当然）并且没有办法使用纯粹的html和css创建那种关联。没有办法用语义方式来表达像the children of this div are going to be on the same row, so they should all share a border这样的东西。

解决方法很简单：

http://jsfiddle.net/8uqae/

只需在末尾为div创建一个特殊类，然后在其余的div上为右边添加边框。

<强> HTML：

<div>
  <div class="left-end fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="clr"></div>
</div>

<强> CSS：

.fl {
  float: left;
}
.clr {
  clear: both;
}
.left-end, .middle {
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    border-top: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
}

.left-end {
  border-left: solid 1px black;
}

正如srini指出的那样，有一些框架可以为此提供帮助，值得研究。各种尺寸屏幕上的跨浏览器响应式div布局可能会非常棘手，因此考虑像Twitter Bootstrap这样的框架是值得的。

Answer 2

最好使用Fluid框架。

http://www.1kbgrid.com/#

Answer 3

我似乎找到了一种使用伪类的有趣方法，现在我还不知道。

:nth-child

使用此类不仅可以选择块中的奇数和偶数元素，还可以选择每个第3，第6和第9个元素。

See this link

但问题是我不知道如何让它适用于列表中的无数个元素。它也与IE不兼容，IE几乎无法使用。

使用float：left为元素应用适当的边框

3 个答案: