2列图像并添加填充

Question

#wrap img{
    width:50%;
    display: inline-block;
}

<div id="wrap">
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
</div>

当我向图像添加填充时，我必须将宽度设置为小于50％，这将导致填充不对齐。如何解决这个问题？

演示：http://jsfiddle.net/7gon7kef/

Answer 1

您将需要使用border-box这应该在您使用百分比宽度来对齐元素的所有项目中使用。

border-box尊重边框，填充元素的大小。

一般情况下，我会将此应用于星号，将样式应用于页面上的每个元素......

* {box-sizing: border-box}

如果您仅将此应用于图片，则下方的剪辑会对您有所帮助。

#wrap {
  background: grey;
}
#wrap img {
  width: 50%;
  display: inline-block;
  padding: 2em;
  box-sizing: border-box;
}

<div id="wrap">
  <img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" />
</div>

Answer 2

您可以尝试使用css column-count：

#wrap { width:100%; -moz-column-count:2; -moz-column-gap:10px; -moz-column-width:50%; -webkit-column-count:2; -webkit-column-gap:10px; -webkit-column-width:50%; column-count:2; column-gap:10px; column-width:50%;}
#wrap img { width:100%; margin-bottom:5px;}

<div id="wrap">
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
</div>

Answer 3

你应该使用像这样的html -

#wrap{
   width: 250px;
    background:red;
    padding:8px 4px 1px
}

#wrap img{
    width:50%;
    display: inline-block;
    padding:0px 4px 4px;
    box-sizing:border-box
    
}

<div id="wrap">
<img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/>
</div>

或者您可以尝试这样的float:left -

.clearfix:after{
  content:'';
  display:block;
  clear:both;
  }
#wrap{
  width: 250px;
  background:red;
  padding:5px;
}

#wrap img{
  width:50%;
  /*display: inline-block;*/
  display:block;
  float:left;
  padding:5px;
  box-sizing:border-box;
  

}

<div id="wrap" class="clearfix">
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
</div>

Answer 4

如果您尝试使用padding将它们排成2行，请尝试此操作。

http://jsfiddle.net/fo270Lzy/

注意我已经使用overflow:hidden;来清除浮动，但你也可以使用正确的clearfix方法。

display:inline-block在元素之间添加了额外的空间。您还需要box-sizing: border-box;来使宽度包含填充。

Answer 5

我认为如果您不需要较旧的浏览器支持，这将对您有所帮助。 基本上在CSS3＆＃34; box-sizing＆＃34;为了同一目的而介绍。它会以指定的宽度调整框。

我还使用font-size:0;包装来删除图像之间的exptra空间，因为我们使用了display: inline-block

demo