使用DIVS +图像定位的响应式布局
这是我想要实现的布局： 
这里是我目前的HTML + CSS（如果它是重复的和关闭的，我只是在学习如此抱歉:)）
<div class="collection clearfix">
<div class="image-left1"> </div>
<div class="icon-left1">
<img src="images/mainLP-chair-icon.png" alt="Chair Collection">
<p>Chair Collection</p>
</div>
</div>
<div class="collection clearfix">
<div class="icon-right1">
<img src="images/mainLP-lamp-icon.png" height="48" width="34" alt="Lamp Collection">
<p>Lamp Collection</p>
</div>
<div class="image-right1"> </div>
</div>
...它共有5个divs堆叠。
和CSS是：
/* =================== Main Section =================== */
.collection {
padding-top: 25px;
}
/*=================== CHAIRS ===================*/
.image-left1 {
background: url(../images/mainLP-chairs.jpg) center;
height: 570px;
width: 70%;
display: inline-block;
}
.icon-left1 {
float: right;
width: 30%;
background-color: #c7db9c;
padding: 10px;
border-left: 25px solid white;
height: 570px;
}
.icon-left1 p {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
color: #fff;
font-weight: 400;
font-size: 14px;
position: relative;
top: 220px;
left: 36px;
}
.icon-left1 img {
border: 0;
position: relative;
top: 222px;
left: 76px;
}
/*=================== LAMPS ===================*/
.image-right1 {
background: url(../images/mainLP-lamps.jpg) center;
height: 570px;
width: 70%;
display: inline-block;
}
.icon-right1 {
float: left;
width: 30%;
background-color: #f4dc86;
padding: 10px;
border-right: 25px solid white;
height: 570px;
}
.icon-right1 p {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
color: #fff;
font-weight: 400;
font-size: 14px;
position: relative;
top: 220px;
left: 36px;
}
.icon-right1 img {
border: 0;
position: relative;
top: 222px;
left: 93px;
}
.wrapper {
width: 70%;
margin: 0 auto;
} (This is around everything)
我并不担心响应，但我应该走在路上。 我看到一些问题。
每个容器的背景图像都没有正确确定尺寸 - 它正在被切断。 我将如何解决这个问题？
必须有更好的方法来浮动图像旁边的图标和文本.. /现在它是不可靠和定位相对，我认为是不正确的。 或者如果它是正确的我想我已经编写它错了。
看完这个之后，解决方案很简单，只需添加：
* {
box-sizing: border-box;
}
制作代码使所有元素都包含填充和宽度的边框。
* {
box-sizing: border-box;
}
/* =================== Main Section =================== */
.collection {
padding-top: 25px;
}
/*=================== CHAIRS ===================*/
.image-left1 {
background: url(http://hbu.h-cdn.co/assets/15/36/980x654/gallery-1441147503-green-hills-residence-5.jpg) center;
height: 570px;
width: 70%;
display: inline-block;
}
.icon-left1 {
float: right;
width: 30%;
background-color: #c7db9c;
padding: 10px;
border-left: 25px solid white;
height: 570px;
}
.icon-left1 p {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
color: #fff;
font-weight: 400;
font-size: 14px;
position: relative;
top: 220px;
left: 36px;
}
.icon-left1 img {
border: 0;
position: relative;
top: 222px;
left: 76px;
}
/*=================== LAMPS ===================*/
.image-right1 {
background: url(http://static.boredpanda.com/blog/wp-content/uploads/2014/07/creative-lamps-chandeliers-16-2.jpg) center;
height: 570px;
width: 70%;
display: inline-block;
}
.icon-right1 {
float: left;
width: 30%;
background-color: #f4dc86;
padding: 10px;
border-right: 25px solid white;
height: 570px;
}
.icon-right1 p {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
color: #fff;
font-weight: 400;
font-size: 14px;
position: relative;
top: 220px;
left: 36px;
}
.icon-right1 img {
border: 0;
position: relative;
top: 222px;
left: 93px;
}
.wrapper {
width: 70%;
margin: 0 auto;
} <div class="collection clearfix">
<div class="image-left1"> </div>
<div class="icon-left1">
<img src="https://jsfiddle.net/img/logo.png" alt="Chair Collection">
<p>Chair Collection</p>
</div>
</div>
<div class="collection clearfix">
<div class="icon-right1">
<img src="https://jsfiddle.net/img/logo.png" height="48" width="34" alt="Lamp Collection">
<p>Lamp Collection</p>
</div>
<div class="image-right1"> </div>
</div>