1

考虑下面的例子：

http://jsfiddle.net/swLyX/

使用闲置的 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 之间的边距大小或破坏元素的对齐方式？

4

2 回答 2

2

如果目标是让任意数量的项目适应任意数量的父容器宽度，那么仅使用 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然后添加一个宽度比父级宽的内部包装器来接受“额外的右边距”。根据情况进行调整。

于 2012-12-07T22:35:45.417 回答
0

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

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

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

于 2012-12-07T22:35:08.030 回答