避免由浮动边距引起的巨大空间答案

【问题标题】：Avoiding huge spaces caused by margins on floats避免由浮动边距引起的巨大空间
【发布时间】：2012-12-08 06:35:45
【问题描述】：

考虑下面的例子：

使用闲置的 HTML：

<div id="container">
  <p> Some text aligned the same as the below set of images
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <p> And some other text
</div>

还有 CSS：

#container {
    width: 299px;
    background-color: #c55;
}
.inner {
    float: left;
    margin: 20px 40px 20px 0;
    width: 60px;
    height: 60px;
    background-color: black;
}
p{
    clear: both;
}

目前的问题是第二个 div 右侧的大空白空间，因为第三个 div 的边距将其扔到下一行。

有一个包含一些文本的红色 div 和三个较小的 div 浮动到左侧，顶部、左侧和底部有一个边距，以保持其他元素保持一定距离。在真实环境中，假设红色 div 是博客文章的容器，并根据其他内容调整边距，三个黑色 div 是图像。

重要的是文本和第一个黑色 div 都应该水平对齐到左边。有什么办法可以让第三个 div 的右边距不扔到第二行而不改变 div 之间的边距大小或破坏元素的对齐方式？

【问题讨论】：

我不明白你的问题。两个盒子在我看来都一样。
小提琴与问题不符。 #container 比能够在不换行的情况下水平容纳所有 .inner 元素少 1 像素。
是的，小提琴距离适合所有三个以说明出现的极端情况相差 1px。问题是：我们如何避免浮动 div 的右边距造成如此大的洞。
我非常抱歉@ChrisHerbert。我发错了小提琴，这应该是正确的：jsfiddle.net/swLyX

标签： css css-float margin

【解决方案1】：

如果目标是让任意数量的项目适应任意数量的父容器宽度，那么仅使用 CSS 就很难确定哪些是“最右侧”元素。

我建议这样做：

http://jsbin.com/uvegef/1/edit

html:

<div id="outerWrapper">
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

css：

#outerWrapper {
  background: pink;
  width: 89px;
  overflow: hidden;
}

#wrapper {
  width: 110%;
}

.item {
  float: left;
  background: blue;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}

上面的示例有一个 89px 的外部父包装器，它比 3 个项目所需的 90px + 它们的边距少 1px。

这个想法是给包装器一个hidden 的溢出，然后添加一个宽度比父级宽的内部包装器来接受“额外的右边距”。根据情况进行调整。

【讨论】：

一个雄辩的解决方案，它解决了与上述文本对齐的问题，而无需重新配置 #outerWrapper div 中每个可能对象的所有边距。

【解决方案2】：

您可以使用 :last-of-type 伪元素。将此添加到您的 CSS 中。

.inner:last-of-type {
    margin-right: 0;
}

请看这里：http://jsfiddle.net/swLyX/5/

【讨论】：

假设有更多的 div 和更多的行有同样的问题，像这样：jsfiddle.net/swLyX/2
这会给你最后一个兄弟，但不一定是浮动行中“最右边”的项目。