1

我正在修复中。我有六个特色帖子（图片），我想以这样的方式出现——

http://media.prothug.com/2013/05/wpid-featt1.png

但我明白了

http://media.prothug.com/2013/05/wpid-Featured1.png

我没有也不能，我已经尝试了很多东西，明白为什么“li”和“ul”之间有那个空白。

这是我为特色图片获得的 html——

<div id="featured-boxes">
<ul class="featured-boxes-ul">
<li>
<a href="http://example.com">
<img src="lemon.jpg" alt="Featured Post 1" />
<p class="featured-boxes-caption">Little Johnny</p>
</a>
</li>
<li>
<a href="http://example.com">
<img src="lemon.jpg" alt="Featured Post 2" />
<p class="featured-boxes-caption">Shrieking Banshee</p>
</a>
</li>
<li>
<a href="http://example.com">
<img src="lemon.jpg" alt="Featured Post 3" />
<p class="featured-boxes-caption">Little Johnny</p>
</a>
</li>
<li>
<a href="http://example.com">
<img src="lemon.jpg" alt="Featured Post 4" />
<p class="featured-boxes-caption">Shrieking Banshee</p>
</a>
</li>
<li>
<a href="http://example.com">
<img src="lemon.jpg" alt="Featured Post 5" />
<p class="featured-boxes-caption">Little Johnny </p>
</a>
</li>
<li>
<a href="http://example.com">
<img src="lemon.jpg" alt="Featured Post 6" />
<p class="featured-boxes-caption">Shrieking Banshee</p>
</a>
</li>
</ul>
</div>

这就是它的css——

#featured-boxes {
    float: left;
    width: 100%;
    margin: 0 0 2em;
}
.featured-boxes-ul {
    float: left;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background:#777;
}
.featured-boxes-ul li {
    float: left;
    position: relative;
    width: 32.7%;
    min-height: 50px;
    margin: 0.3em 0;
}
.featured-boxes-ul li:nth-child(2), .featured-boxes-ul li:nth-child(5) {
    margin-left: 0.95%;
    margin-right: 0.95%;
}
.featured-boxes-ul a {
    display: block;
    outline: 0;
}
.featured-boxes-ul a:hover {
    text-decoration: none;
}
.featured-boxes-ul img {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}
.featured-boxes-caption {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    bottom: 0;
    color: #fff;
    font-size: 1em;
    line-height: 24px;
    text-indent: 30px;
    background: rgba(34, 34, 34, 0.5);
    z-index: 10;
}

http://jsfiddle.net/5Wjvd/

“li”元素的宽度以及第 2 和第 5 个“li”元素周围的左右边距加起来总共为 100%。我已经尽我所能，我确信“ul”在右侧没有任何填充。如果我将“li”变小，并使第 2 个和第 5 个“li”子节点的边距非常大，比如 10%，那么整个特色图像会占据整个“div”，而不会在图像和“乌尔”。问题似乎是浏览器无法准确计算小边距。

我的css有什么问题吗？任何帮助，将不胜感激。

4

2 回答 2

0

好的，这里有几件事：

  1. 为什么要使用<li>元素？你能用<div>s吗？
  2. 有一些方法可以解决这个问题。但是仅仅使用 CSS 浮动可能不适合你。即使你的数学是完全正确的，正如我上面所说的，浏览器不能做一个像素的一小部分。如果您要完美地浮动这些并且您仍然可以使用边距，那么每隔一段时间，您的最右边的图像就会向下推，就好像它漂浮在其他两个周围一样。

您可以将第三个元素浮动到右侧，并且在第二个元素之后没有边距。如果你做对了你的数学，你可以让它看起来正确，但如果你这样做，你可能仍然有不相等的边距。（这里的小提琴：http: //jsfiddle.net/WZXa4/）

于 2013-05-28T18:42:46.690 回答
0

混合单元可能会出现问题，尤其是在涉及边距的情况下（否则您可以使用box-sizing: border-box而不用担心它。如果您的目标是让您的元素具有响应性，我的建议是使用 CSS 多列模块：

http://cssdeck.com/labs/txvon6wq

#featured-boxes {
    float: left;
    width: 100%;
    margin: 0 0 2em;
}
.featured-boxes-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background:#777;
  columns: 15em;
  column-gap: 1em;
}
.featured-boxes-ul li {
    position: relative;
    min-height: 50px;
    margin: 0.3em 0;
  box-sizing: border-box;
}
.featured-boxes-ul li:first-child {
  margin-top: 0;
}
.featured-boxes-ul a {
    display: block;
    outline: 0;
}
.featured-boxes-ul a:hover {
    text-decoration: none;
}
.featured-boxes-ul img {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}
.featured-boxes-caption {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    bottom: 0;
    color: #fff;
    font-size: 1em;
    line-height: 24px;
    text-indent: 30px;
    background: rgba(34, 34, 34, 0.5);
    z-index: 10;
}

http://caniuse.com/#feat=multicolumn

Flexbox 也可以用于此目的，但浏览器支持较低，因为并非所有支持 Flexbox 的浏览器都支持flex-wrap: wrap。

http://codepen.io/cimmanon/pen/iHGCd

.gallery {
  margin: -5px;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@supports (flex-wrap: wrap) {
  .gallery {
    display: flex;
  }
}

.gallery img {
  margin: 5px;
}

http://caniuse.com/flexbox

于 2013-05-28T23:06:20.693 回答