三列图层宽度为100％？

有了这个网站：三列图层宽度为100％？

<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％以下的元素对齐，希望你明白我的意思）。

来源

2016-02-23 bestprogrammerintheworld

尝试使用'width：33,33333333％'而不是'margin-right'使用'padding-right'。填充在元素宽度内的元素内部偏移。 – martin

这在所有主流浏览器中都有效吗？我也希望图像之间有一些空间。因此使用margin-right – bestprogrammerintheworld

尽管尚未完全支持所有浏览器，但您应该阅读flexbox并让它为您解决问题。有关支持，请参阅http://caniuse.com/#feat=flexbox – Paul

尝试使用width: 33,33333333%和替代margin-right使用padding-right。填充在元素宽度内的元素内部偏移。

来源

2016-02-23 12:59:50 martin

非常感谢！简单但有效。诀窍是使用填充而不是边距。 – bestprogrammerintheworld

您可以用JavaScript实现它例如

https://jsfiddle.net/fx1azr4q/

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

来源

2016-02-23 12:52:28 MyMomSaysIamSpecial

这似乎是浪费资源？我想在纯CSS中做到这一点。 – bestprogrammerintheworld

你是绝对正确的，没有理由使用JS。 –

并且您提供带有解决方案的最少10个知道问题和特殊页面的Flexbox？ – MyMomSaysIamSpecial

三列图层宽度为100％？

回答

相关问题