如何使用 imgs 获得响应相等的边界？答案

【问题标题】：how to get responsive equal borders with imgs?如何使用 imgs 获得响应相等的边界？
【发布时间】：2014-09-22 23:59:01
【问题描述】：

这是我尝试过的，但边界不相等。

.foo{
    width: 100%;
    height: 100%;
    background: #999;
    padding-left: 2%;
    padding-top: 2%;
}
img{
    width: 47%;
    margin-top: 0;
    margin-bottom: 2%;
    margin-right: 2%;
    padding: 0;
}

和html：

<div class="foo">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
</div>

http://jsfiddle.net/07Lwwmgb/

也许我的方法不好

【问题讨论】：

实际上它是流动的，平等的边界。响应式通常与媒体查询相关联。

标签： html css layout responsive-design

【解决方案1】：

演示：http://jsfiddle.net/n64vaahu/

CSS

body {
    margin: 0;
    padding: 0;
}
.foo {
    width: 100%;
    height: 100%;
    background: #999;
    box-sizing: border-box;
    padding: .5%;
}
img {
    width: 50%;
    float: left;
    padding: .5%;
    box-sizing: border-box;
}
.clear {
    clear: both
}

HTML

<div class="foo">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
        <div class="clear"></div>
</div>

【讨论】：