資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML和CSS建立響應式圖片網格？
網頁上的圖片網格以網格形式顯示圖片。在一個外部網格中，我們可以建立內部網格。此外，需要為不同裝置的圖片網格設定響應式佈局。在網頁瀏覽器上，透過調整瀏覽器大小來檢查響應式佈局。讓我們看看如何使用HTML和CSS建立一個響應式圖片網格。
設定外部和內部網格
設定一個用於外部網格的div。在其中，設定內部網格。我們在外部網格內設定了三個內部網格。
<div class="outer-grid">
<div class="inner-grid">
<!—images -->
</div>
<div class="inner-grid">
<!—images -->
</div>
<div class="inner-grid">
<!—images -->
</div>
</div>
定位外部網格
使用`**display**`屬性將外部網格設定為flex佈局。`**flex-wrap**`屬性設定為`**wrap**`值，以指定flex專案在必要時會換行。
.outer-grid {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
定位內部網格
為內部網格設定flex佈局。`flex-basis`設定為25%，因此`**flex: 25%**`。它設定flex專案的初始主要大小。`**max-width**`屬性用於設定最大寬度。
.inner-grid {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
內部網格中的圖片
內部網格中圖片的寬度設定為100%。
.inner-grid img {
margin-top: 8px;
width: 100%;
padding: 10px;
}
設定響應式佈局
當網頁瀏覽器設定為小於800px時，響應式佈局生效。`**flex**`屬性設定為50%。
@media screen and (max-width: 800px) {
.inner-grid {
flex: 50%;
max-width: 50%;
}
}
當網頁瀏覽器大小小於600px時，`flex`和最大寬度設定為100%。
@media screen and (max-width: 600px) {
.inner-grid {
flex: 100%;
max-width: 100%;
}
}
示例
以下是使用HTML和CSS建立響應式圖片網格的程式碼：
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.outer-grid {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.inner-grid {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.inner-grid img {
margin-top: 8px;
width: 100%;
padding: 10px;
}
@media screen and (max-width: 800px) {
.inner-grid {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.inner-grid {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<h1>Responsive Image Grid Example</h1>
<div class="outer-grid">
<div class="inner-grid">
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
</div>
</body>
</html>
更新於：2023年12月8日
5K+ 瀏覽量
廣告