Question

考虑下面的例子：

暂停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之间边距的大小或打破元素的对齐？

Answer 1

如果目标是让任意数量的项目容纳任意数量的父容器宽度，那么单独使用CSS，就没有简单的方法可以找出最合适的＆＃39;最右边的＆＃39 ;元素。

我建议做的是：

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，然后添加一个宽度更宽的内包装，而不是父包，以接受额外的右边距＆＃39; 。根据情况需要进行调整。

Answer 2

您可以使用：last-of-type伪元素。将其添加到您的CSS。

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

见这里：http://jsfiddle.net/swLyX/5/

避免由浮子上的边距引起的巨大空间

2 个答案: