0

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

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

将此应用到一个 DIV 列表中，每个 DIV 都显示在另一个之下，这也是一件简单的事情，因为我需要做的就是删除最后一个孩子的底部边框。

但：

当我使用一个相邻浮动的 DIV 列表时，例如连续 3 个（在它们的宽度总和超过目标容器的宽度并导致它们换行之前），我总是以一些双边框结束在某些方面。

有没有一个干净整洁的 CSS 解决方案？

4

3 回答 3

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等框架是值得考虑的。

于 2012-10-22T22:45:55.907 回答
0

最好为此使用 Fluid 框架。

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

于 2012-10-22T22:32:10.873 回答
0

似乎我找到了一种使用伪类的有趣方法，到目前为止我还不知道。

:nth-child

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

看到这个链接

然而问题是我不知道如何使它适用于列表中的无限数量的元素。此外，它与 IE 不兼容，这使得它几乎无法使用。

于 2012-10-22T22:49:50.960 回答