與DIVS +形象定位響應式佈局

Question

這是我想達到的佈局：

這是我目前的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周的div。

和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) 

我不關心另外一個關於響應，但我應該是在路上。我看到一些問題。

每個容器的背景圖片尺寸不正確 - 它會被切斷。我將如何解決這個問題？

必須有一個更好的方式來漂浮圖像旁邊的圖標和文本../現在它是不可靠和定位相對，我認爲是不正確的。或者如果它是正確的我想我已經編寫它錯了。

Answer 1

看着這之後，解決方法很簡單，只需添加：

* { 
    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>

關於背景被切斷，使嘗試使用background-size:contain ......爲background-size: cover你不工作。您通常使用background: ... no-repeat與background-size:contain。