如何響應式地在一個div內的單行內排列圖像

我試圖將鏈接放在一行圖像上，以便不同的圖像具有不同的鏈接。我也有這個div縮小以適應某些媒體屏幕尺寸。但是，圖像並未根據包裝要求調整大小。請幫忙。如何響應式地在一個div內的單行內排列圖像

這裏的HTML：

.box { 
 
    width: 100%; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 
@media screen and (min-width: 768px) and (max-width: 1024px) { 
 
    body { 
 
    text-align: center; 
 
    background: url(image/bg.png) center top; 
 
    } 
 
    #wrapper { 
 
    width: 768px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    } 
 
} 
 
@media screen and (min-width: 1024px) { 
 
    body { 
 
    text-align: center; 
 
    background: url(image/bg.png) center top; 
 
    } 
 
    #wrapper { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    }

<div id="wrapper"> 
 
    <div class="box"> 
 
    <img src="image/pea.jpg"> 
 
    </div> 
 
    <div class="box"> 
 
    <img src="image/pea_01.jpg"> 
 
    <img src="image/pea_02.jpg"> 
 
    <img src="image/pea_03.jpg"> 
 
    <img src="image/pea_04.jpg"> 
 
    <img src="image/pea_05.jpg"> 
 
    </div> 
 
    
 
    <!-- main issue here --> 
 
    <div class="box"> 
 
    <img src="image/pea_footer.jpg"> 
 
    </div> 
 
</div>

這裏的排隊（臺式機）的屏幕截圖。移動添加顯示後，看起來似乎很好：inline-block; 寬度：自動;以.box：

來源

2016-11-28 Sue Anne C

你可以添加這個CSS .box的{顯示：inline-block的;寬度：自動;} –

得到它在移動視圖上的工作！但桌面視圖仍然沒有對齊，請參閱附加圖片編輯，請幫助。 –

你可以添加float：留在css中可能會起作用 –

我認爲最好不要將明確的寬度或高度應用於圖像標記。請嘗試：

max-width:100%; 
max-height:100%;

只要使用基於百分比的佈局，而不是像素或其它測量。例如：

<img width="50%">: that will fill half of the containing element, at any size 
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.

來源

2016-11-28 09:07:17 anakpanti

謝謝修改。是啊......這是「包含元素」大小而不是「屏幕」大小。 – anakpanti

我想刪除任何靜態的寬度，因爲你只需要檢測當視域是具有一定規模，然後更改IMG寬度，然後，我在這裏做。我將每個圖像設置爲顯示塊以刪除它們周圍的任何邊距或填充。您可能不想這樣做，但我喜歡將其設置爲默認值。

這樣，您可以選擇適合您的不同斷點，而不是在每個斷點處設置靜態寬度。這是響應式發展的美妙之處。保持靈活性而不是控制包含div的情況;讓內容運行。在全屏模式下運行，下面這段代碼來查看完整的桌面樣式（每個IMG去20％的50％，而非）：

.box { 
 
    width: 100%; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 20%; 
 
    float: left; 
 
    } 
 

 
@media screen and (max-width: 767px) { 
 
img { 
 
width: 50%; 
 
} 
 
}

<div id="wrapper"> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/100x100"> 
 
    </div> 
 
    <div class="box"> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    </div> 
 
    
 
    <!-- main issue here --> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/100x100"> 
 
    </div> 
 
</div>

來源

2016-11-28 09:31:34

我試着調整了一下代碼，但圖像全部出現在1行垂直線上，我希望它們是水平的。對不起，沒有具體... –

嗨，我用你的HTML代碼，他們都在每個.box分組水平。 –

確定它工作！必須以20％完美分割它們。非常感謝！ –

你.box的可能是display:flex

.box { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-around; 
}

請記住，您的5 <img>應該是圖標，不包含您的background（雲）。
我認爲下面的代碼會爲你的形象是正確的：

.box img { 
    max-width: 20%; 
}

來源

2016-11-28 14:59:39 AymDev

如何響應式地在一個div內的單行內排列圖像

回答

相關問題