Question

我正在解决问题。我有六个特色帖子（图片），我希望看起来像这样---

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”而不会在图像和“之间留下任何空白空间” UL”。问题似乎是浏览器无法准确计算小边距。

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

Answer 1

好的，这里有一些事情：

您为什么使用<li>元素？你能用<div> s吗？
这有几种方法。但是使用CSS浮动可能不适合你。即使您的数学完全正确，如上所述，浏览器也无法做到像素的一小部分。如果你要完美地漂浮它们并且你仍然可以使用边缘，每隔一段时间，你的最右边的图像会向下推，好像它漂浮在另外两个周围。

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

Answer 2

混合单元可能会有问题，特别是如果涉及边距（否则你可以使用box-sizing: border-box而不用担心它。如果你的目标是让你的元素有响应，我的建议是使用CSS Multicolumn模块：

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

奇怪的CSS边缘行为 - 浏览器没有正确显示小边距

2 个答案: