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％+保证金权利（1％* 3）=父母元素总数的99％。

如何获得100％的父元素，以便它适用于所有主流浏览器？链接数量可能会有所不同，所以我永远不知道它是5还是18等......（我希望图像与100％以下的元素对齐。希望你理解我的意思）。< / p>

Answer 1

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

Answer 2

您可以使用javascript实现它，例如

https://jsfiddle.net/fx1azr4q/

    (function() {
      var elements = document.getElementsByTagName('a');
      [].forEach.call(elements, function (el) {
        el.style.width = (100-elements.length)/elements.length + '%';
      });
    })();

三列层的宽度为100％？

2 个答案: