html - 三列层中的 100% 宽度？

Question

有这个 html:

<div class="images_portfolio panel-widget-style">
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
<a href="imagelink"><img src="x.jpg" alt="" /></a>
</div>

和这个 CSS:

.images_portfolio.panel-widget-style a img {
    width:100%;
    height:auto;
}

.images_portfolio.panel-widget-style a {
    position:relative;
    display:block;width:32%;margin-right:1%;
    float:left;
    margin-bottom:1%;
}

它

我可以得到父元素总共32%+32%+32% = 96% + margin right (1%*3) = 99%。

我怎样才能获得 100% 的父元素以便它在所有主流浏览器中工作？链接的数量可能会有所不同，所以我不知道它是 5 还是 18 等...(我希望图像与低于 100% 的元素对齐。希望你明白我的意思)。

Answer 1

尝试使用 width: 33,33333333% 而不是 margin-right 使用 padding-right。填充在元素内部偏移，计入元素宽度。