響應式背景的同一行上的五個圖像（響應行）

我試圖創建一個響應行，其中包含桌面上的五個內聯圖像，平板上的兩列和智能手機上的列。響應式背景的同一行上的五個圖像（響應行）

我還在這五張圖片下面放了一張背景圖片，但是我希望這張圖片在我使用小桌面，桌子或智能手機時能夠反應靈敏。

這就是我試圖做的，但我不認爲這是一個很好的解決方案，因爲背景是不是真的迴應：

HTML

<div class="background"> 
<div class="layer"> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg"> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg"> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg"> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg"> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg"> 
    </div> 
</dvi> 
</div>

CSS

.background { 
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 

.layer { 
    background-color: rgba(18, 29, 47, 0.96); 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    padding: 100px 100px 300px 100px; 
} 

.div-diviso { 
    width: 20%; 
    padding: 15px; 
    position: relative; 
    float: left; 
    text-align: center; 
} 


@media (min-width: 768px) and (max-width: 980px) { 
.layer { 
    background-color: rgba(18, 29, 47, 0.96); 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    padding: 0px 0px 900px 0px; 
    text-align: center; 
} 
.div-diviso { 
    width: 50%; 
    padding: 15px; 
    position: relative; 
    float: left; 
    text-align: center; 
} 
} 

@media (max-width: 767px) { 
.layer { 
    background-color: rgba(18, 29, 47, 0.96); 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    padding: 0px 0px 1500px 0px; 
    text-align: center; 
} 
.div-diviso { 
    width: 100%; 
    padding: 15px; 
    position: relative; 
    float: left; 
    text-align: center; 
} 
}

這是我想要的：

Example image

來源

2017-02-09 Matteo

通過將所有'.div-diviso'元素設置爲'display：inline-block;'，您可以使這種響應非常靈活而無斷點。 –

如果你想使用外部庫[Bootstrap]（http://getbootstrap.com/）就是這樣。 –

.background { 
 
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
.layer { 
 
    background-color: rgba(18, 29, 47, 0.96); 
 
    background-repeat: repeat; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.div-diviso { 
 
    width: 17%; 
 
    padding: 10px; 
 
    display: inline-block; 
 
} 
 
.div-diviso img { 
 
    width: 100%; 
 
} 
 

 

 
@media (min-width: 768px) and (max-width: 980px) { 
 
.layer { 
 
    padding: 0px 0px 900px 0px; 
 
    text-align: center; 
 
} 
 
.div-diviso { 
 
    width: 47%; 
 
    padding: 10px; 
 
} 
 
} 
 

 
@media (max-width: 767px) { 
 
.layer { 
 
    padding: 0px 0px 1500px 0px; 
 
    text-align: center; 
 
} 
 
.div-diviso { 
 
    width: 98%; 
 
    padding: 5px; 
 
} 
 
}

<div class="background"> 
 
<div class="layer"> 
 
    <div class="div-diviso"> 
 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg"> 
 
    </div> 
 
    <div class="div-diviso"> 
 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg"> 
 
    </div> 
 
    <div class="div-diviso"> 
 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg"> 
 
    </div> 
 
    <div class="div-diviso"> 
 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg"> 
 
    </div> 
 
    <div class="div-diviso"> 
 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg"> 
 
    </div> 
 
</div> 
 
</div>

恰克寬度百分比，並使用顯示：內聯塊而不是位置。注意：您不必在媒體查詢中重複相同的代碼

來源

2017-02-09 16:24:38

響應式背景的同一行上的五個圖像（響應行）

回答

相關問題