如何設置父div的寬度以匹配a/img？

我想在一行中有4個圖像，等距。然後，當屏幕尺寸爲特定分辨率時，我想要2張圖像放在下面的行中。如何設置父div的寬度以匹配a/img？

將4個圖像設置爲一行，等間隔是容易的部分。我正在努力獲得下面兩行圖像。我的想法是將兩個圖像包裝在一個div中，並執行兩次。所以有兩個div，每個div有兩個圖像。當屏幕分辨率很大時，請將div設置爲inline-blocks。然後，當分辨率降低太低時，請將div設置爲阻止。

問題： div的寬度與兩幅圖像的寬度不匹配。相反，div跨越其父div的整個寬度。

我該如何解決這個問題？或者有更好的方法嗎？

JSFiddle

.Containter{ 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
} 
 

 
.Sections{ 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    border: 1px solid green; 
 
} 
 

 
.Sections>a{ 
 
    border: 1px solid brown; 
 
} 
 

 
.Photo{ 
 
    width: 20%; 
 
    height: auto%; 
 
    border-radius: 10px; 
 
    /*margin: 0px 15px 0px 15px;*/ 
 
    border: 1px solid blue; 
 
}

<div class="Containter"> 
 
    <div class="Sections"> 
 
     <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 

 
     <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 
    </div> 
 

 
    <div class="Sections"> 
 
     <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 

 
     <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 
    </div> 
 
</div>

感謝

來源

2015-09-03 Shocker_33

您可以使用媒體查詢來實現你想要的是這樣的：

這裏工作JSFiddle與

玩

.Containter { 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
} 
 
.Sections { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    border: 1px solid green; 
 
} 
 
.Sections>a { 
 
    border: 1px solid brown; 
 
} 
 
.Photo { 
 
    width: 20%; 
 
    height: auto%; 
 
    border-radius: 10px; 
 
    /*margin: 0px 15px 0px 15px;*/ 
 
    border: 1px solid blue; 
 
} 
 
@media (max-width: 768px) { /*change to desired resolution*/ 
 
    .Photo { 
 
     width: 45%; /*change to desired width*/ 
 
    }

<div class="Containter"> 
 
    <div class="Sections"> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 
\t <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 
<a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 
\t <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> 
 

 
    </div> 
 
</div>

Check out this for more info

來源

2015-09-03 23:29:55

這不是我要找的。我想將div設置爲兩幅圖像的寬度加上一點餘量。不，請設置圖像寬度來填充div。其中每張照片的寬度設置爲20％，左側和右側的餘量已經被註釋掉了，當屏幕分辨率較大時，4張圖片完美地排列成所需的寬度。例如例如。 [JSFiddle之前，我把兩個div包含兩個圖像]（http://jsfiddle.net/Shocker33/a212z7qs/3/）這個問題是，我不想頂部行包含3個圖像底部只有1個屏幕分辨率。 –

其實，我把我的評論回來了。我明白它現在的作用。開裂。它完成這項工作。乾杯。 –

我很樂意幫助你。 –

如何設置父div的寬度以匹配a/img？

回答

相關問題