0

我不明白为什么这两个示例的行为不同。HTML 和 CSS 的目标只是水平对齐 div，让最后一个 div（向右）占据剩余空间（容器的剩余宽度）。

对正确的项目使用特定的 ID：

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="right">last</div>
</div>

使用 :last-child:

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#left:last-child {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="left">last</div>
</div>
4

7 回答 7

3

您使用的 ID 不正确。ID 代表页面的唯一元素。试试这个：

HTML

<div class="list">
    <div>item 1</div>
    <div>item 2</div>
    <div>last</div>
</div>

CSS

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    width: 100%;
    background-color: #00FF00;
}

编辑

您的#right示例显示不同，因为它没有继承float: left;. 如果您想模仿该功能，float: none;请像这样添加到 CSS 中：

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    float: none;
    width: 100%;
    background-color: #00FF00;
}
于 2012-10-10T22:08:05.673 回答
1

这两个示例之间的区别非常简单：

在第一个示例中，前两个元素向左浮动，第三个元素只是放置在正常的文档流中。

在第二个示例中，第三个元素也匹配样式表中的“#left”规则（第一个），这意味着它也被设为向左浮动。

当第三个元素不浮动时，第一个和第二个元素实际上位于第三个元素的顶部。当所有三个都浮动时，它们不会重叠，因此第三个被分流到第二行。

我希望这是有道理的！

编辑：根据大卫的评论（和其他人），值得注意的是使用多个相同的 ID 是无效的。它“有效”是因为浏览器非常容忍错误，但不能依赖它，而且通常是一个非常糟糕的主意。

如果你在 HTML 中用 "class=" 替换所有 "id=" 实例，在 CSS 中用 "."s 替换 "#"s，它们将是完全正确的，但仍然以同样奇怪的方式表现！

（就个人而言 - 不抱怨某人对 HTML/CSS 的不正确使用与鼓励它不同：p）

于 2012-10-10T22:06:25.520 回答
0

我也喜欢 :last-child，但它在 IE7 及以下浏览器中不受支持（希望我的版本正确）

于 2012-10-10T22:02:16.507 回答
0

HTML 无效...

尝试：

<style type="text/css">
#left1, left2 {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left1">item 1</div>
    <div id="left2">item 2</div>
    <div id="right">last</div>
</div>

您的 ID 必须全部不同（唯一）。您不能拥有多个同名 ID。使用有效的 ID，它的行为应该与使用 :last-child 相同。然而，虽然 :last-child 是现代的编码方式，但它在 IE8 或更低版本中不受支持。

您也可以使用相同的类而不是唯一 ID。

<style type="text/css">
.left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div class="left">item 1</div>
    <div class="left">item 2</div>
    <div class="right">last</div>
</div>
于 2012-10-10T22:09:01.517 回答
0

不同之处在于，在第二个示例中，最后一个孩子向左浮动（因为规则集 for #left），而在第一个示例中，最后一个孩子没有 id of left，因此不受规则的约束。

我已经清理了您的重复 ID，以制作演示您想要的效果：http: //jsbin.com/acomaw/1/edit

像这样的 CSS 规则集k.left被有效地注释掉了；将k前缀移动到其他两个规则集，以查看它们如何具有相同的效果。

于 2012-10-10T22:09:58.590 回答
0

好的，所以关于导致问题的原因几乎已经说明了答案，但是没有人提供关于 css 的最简洁的答案。以下是实现您想要做的最好、最简洁和受支持的方式。

  1. 除非您覆盖先前设置的宽度，否则您永远不需要应用width:100%div，即使在这种情况下最好使用auto.
  2. 您不需要每次都复制“左”类（除非您要在其中放置其他 div 标记）——这减少了不必要的标记。也正如 rrowland 部分指出的那样，使用包装类——这会给你更多未来的灵活性。
  3. 如果浏览器对某个功能的支持较低，您可以通过另一种更受支持的方式实现 -使用另一种方式。last-child尚未完全支持，因此只需定义一个类来定位您的最后一项。有关更多信息，您可以阅读使用最后一个子选择器

所以标记和css应该是：

<style type="text/css">
  .cols div {
    float: left;
    padding: 0 1cm;
    background-color: #FF0000;
  }
  .cols .last {
    float: none;
    background-color: #00FF00;
  }
</style>
<div class="cols">
  <div>item 1</div>
  <div>item 2</div>
  <div class="last">last</div>
</div>

我意识到它们是微妙的变化，但我发现阅读 css 的主要抱怨之一是过度使用不必要的声明。

  • class="永无止境的类列表..."
  • 向左飘浮
  • 位置：相对

成为最严重的罪犯。

于 2012-10-10T22:35:38.743 回答
0

谢谢大家提供了很多有用的答案！

我完全同意关于滥用 id 与 class 的评论。这是因为我缺乏 CSS 经验，而且网络上到处都是类似的例子......

但是，我还有一个额外的问题：

通过您的更正，我的示例现在看起来像这样（忽略有关：last-child 的相关评论）：

<style type="text/css"> 
.left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.left:last-child {
    float: none;
    background-color: #00FF00;
}
</style>

<div>
    <div class="left">item 1</div>
    <div class="left">item 2</div>
    <div class="left">last</div>
</div>

最后一个 div 现在可以填充剩余的空间，但让我感到困惑的是，现在这个 div 没有继承 .left 上设置的填充。为什么会这样？

于 2012-10-11T18:52:12.087 回答