问题1：描述，如下面图片显示的结果，当图片大小高度不一的时候，就会出现如图所示的问题：
问题2：当容器高度依靠内容撑开，并且需要做到自适应宽高的时候，解决方法可以巧用margin/padding的百分比实现高度自适应，达到占位，避免避免闪烁；
例如下面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 1200px;
margin: 0 auto;
background-color: aquamarine;
}
.row {
display: flex;
flex-wrap: wrap;
}
.cell {
width: 23.5%;
margin-right: 2%;
background-color: red;
margin-bottom: 20px;
}
.cell:nth-of-type(4n) {
margin-right: 0;
}
.cell .images {
width: 100%;
background-color: blue;
}
.cell .images .test_images {
width: 100%;
position: relative;
padding-top: 100%;
overflow: hidden;
}
.cell .images .test_images .img_wrap {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.cell .images img {
width: 100%;
height: auto;
}
.blogs p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<!--
描述上面图片
-->
<div class="container">
<div class="row">
<div class="cell">
<div class="images">
<div class="test_images">
<div class="img_wrap">
<img src="http://www.qpoint.hk/wp-content/uploads/2018/11/QPoint_coupons_Offer_Japan_Image_20181029175418_0_LKF_Street_Carnival_1.jpg">
</div>
</div>
</div>
<div class="blogs">
<h2>蘭桂坊日本嘉年華</h2>
<p>喜歡日本的人就像上了癮，無時無刻都想念日本。想要止止日本癮的朋友，11月可到以Cool Japan為主題的「蘭桂坊日本嘉年華」。承接往年的成功經驗，一連兩天的標誌性蘭桂坊街頭祭典將展示日本文化最華麗的一面，包括日式當地美餚、飲品以及多姿多彩的娛樂表演。嘉年華提供浴衣，讓你可以和閨密一邊穿浴衣，一邊品嘗甜點如青森縣的蘋果批、北海道氣球牛乳布甸、日式佳餚如A5和牛等多款美食，讓你全程投入充滿趣味的日本文化展覽和活動之中！ 今日小編還會介紹蘭桂坊一些人氣日本餐廳的限時Q優點折扣讓你盡興而歸！ 蘭桂坊日本秋祭市集 著浴衣歎A5和牛 蘭桂坊日本秋祭嘉年華為期兩天，屆時將會提供浴衣，讓一眾閨密們可以即場更換浴衣。另外，蘭桂坊日本秋祭嘉年華設40個攤位，攤位有刺激的互動遊戲，亦有來自日本各地的日式清酒和佳餚！ Monchhichi期間限定店舖 由11月8日至11 月11日期間，蘭桂坊將聯同日本水果批發商兼官方授權甜品生產商山下菓子，精心呈獻新鮮水果市場和Monchhichi期間限定店舖。蘭桂坊首次聯乘山下菓子打造的第一個在港島區的限定店，印有Monchhichi圖案的日本著名美食如布丁、卷蛋及果汁將於活動期間內供應，定必俘虜一眾Monchhichi粉絲的歡心。參加者亦可在場內購買香港原創、於日本歌唱出道的卡通人物歌手—星星兔 (Sing Sing Rabbit)的精品系列。 LKF Cool …</p>
</div>
</div>
<div class="cell">
<div class="images">
<div class="test_images">
<div class="img_wrap">
<img src="http://www.qpoint.hk/wp-content/uploads/2018/10/正在消失的香港文化t1.png">
</div>
</div>
</div>
<div class="blogs">
<h2>8個正在消失的香港文化</h2>
<p>在這個快速變動的時代，舊的傳統漸趨式微，到底有什麼樣的香港傳統文化正慢慢淡出大眾的視線？ 1️⃣ 大排檔 富人情味的傳統用餐方式由於衛生的問題，已經隨著營業牌照的限制，減少到只剩20多家！ 2️⃣ 點心車 現今大多數的茶樓皆把過去用推車仔點菜的環節換成用點心紙，保有點心車傳統的茶樓已寥寥無幾。 3️⃣ 炒栗子 在冬天推著推車，在路邊叫賣的炒栗子攤販，已經成為過去，溫暖的景象已經被熙攘的人群所取代。 4️⃣ 冰室 代表香港市井文化的仿西式咖啡廳，在80年代起慢慢演變成步調快速的茶餐廳，專售簡單小食與飲品的悠閒好去處不復存在。 5️⃣ 士多 每一家士多陳設，玩意皆異，是屬於70，80年代生的童年回憶，如今已經被連鎖便利商店給取代。 6️⃣ 唐樓 無升降機的舊樓，隨著人口激增，居住空間往高處發展，漸漸被併購，重建，現多已淪為街舖的貨倉。</p>
</div>
</div>
<div class="cell">
<div class="images">
<div class="test_images">
<div class="img_wrap">
<img src="http://www.qpoint.hk/wp-content/uploads/2018/10/饮食须知-t1.png">
</div>
</div>
</div>
<div class="blogs">
<h2>饮食须知</h2>
<p>香港作为美食之都，有带三个胃都吃不够的佳餚！在出门准备去名店朝圣，大吃特吃之前，有什麽是需要注意的呢？ ?秘诀1：自备环保袋 自2015年4月起，为了响应环保，店家不再免费提供塑胶袋。每一个袋子要额外收至少$ 0.5 港币 ?秘诀2：自备餐巾纸 多数的餐厅不提供餐巾纸，若有使用餐巾纸的需要，记得自备一包。 ?秘诀3：自备冷水 多数的餐厅呈上的是温热的开水，若需要加冰块，尚须额外加钱。 ?秘诀4：需要什麽服务自己开口 大部分的餐厅不收服务费。为了让客人有自己的空间，侍应不会主动前来点餐，因此需要任何服务，记得要主动开口 ?秘诀 5：备好现金 并非每家餐馆皆受信用卡，尤其是小摊贩，多备现金在身上以备不时之需 ?秘诀6：注意有没有额外收费 有些餐听主动送上的茶，调味酱料或小菜会额外收费，若不需要须先告知侍应。 ?秘诀7： 做好「併桌」的准备 在尖峰时段为了让每位食客都可以尽快享受到餐点，每一个空位会被商家好好运用。因此做好跟他人併桌的准备哟。 ?秘诀8：茶水先用茶水来洗餐具 热茶在拿来喝前，可先用来清洗餐具，洗过餐具的水直接倒入桌上大碗中即可。 ?秘诀9：去优质旅游服务协会认证的餐厅用餐 如果你不确定去哪裡吃饭有保障，就参考优质旅游服务协会认证过的餐厅吧！</p>
</div>
</div>
<div class="cell">
<div class="images">
<div class="test_images">
<div class="img_wrap">
<img src="http://www.qpoint.hk/wp-content/uploads/2018/10/饮食须知-t1.png">
</div>
</div>
</div>
<div class="blogs">
<h2>饮食须知</h2>
<p>香港作为美食之都，有带三个胃都吃不够的佳餚！在出门准备去名店朝圣，大吃特吃之前，有什麽是需要注意的呢？ ?秘诀1：自备环保袋 自2015年4月起，为了响应环保，店家不再免费提供塑胶袋。每一个袋子要额外收至少$ 0.5 港币 ?秘诀2：自备餐巾纸 多数的餐厅不提供餐巾纸，若有使用餐巾纸的需要，记得自备一包。 ?秘诀3：自备冷水 多数的餐厅呈上的是温热的开水，若需要加冰块，尚须额外加钱。 ?秘诀4：需要什麽服务自己开口 大部分的餐厅不收服务费。为了让客人有自己的空间，侍应不会主动前来点餐，因此需要任何服务，记得要主动开口 ?秘诀 5：备好现金 并非每家餐馆皆受信用卡，尤其是小摊贩，多备现金在身上以备不时之需 ?秘诀6：注意有没有额外收费 有些餐听主动送上的茶，调味酱料或小菜会额外收费，若不需要须先告知侍应。 ?秘诀7： 做好「併桌」的准备 在尖峰时段为了让每位食客都可以尽快享受到餐点，每一个空位会被商家好好运用。因此做好跟他人併桌的准备哟。 ?秘诀8：茶水先用茶水来洗餐具 热茶在拿来喝前，可先用来清洗餐具，洗过餐具的水直接倒入桌上大碗中即可。 ?秘诀9：去优质旅游服务协会认证的餐厅用餐 如果你不确定去哪裡吃饭有保障，就参考优质旅游服务协会认证过的餐厅吧！</p>
</div>
</div>
</div>
</div>
</body>
</html>
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
