當我們處理桌面版本時看起來一切都很好，但是在進入移動版本之后，影像出現了一些奇怪的空間，但是我設定了 height: 100%，但它仍然在影像下方附加了一些空白，無論高度如何.
我附上了一張照片，當我們達到小于 768 像素時，您可以在影像后面看到一個空白區域。
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/utilities.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="./css/mobile.css">
<title>Blog</title>
</head>
<body>
<section id="blog1">
<div class="row">
<div class="column">
<img src="./img/blog/blog1.jpg" alt="">
</div>
<div class="column bgLight">
<div class="column2">
<h2>
Blog Post One</h4>
<p class="meta">
<i class="fas fa-user"></i> Posted by <strong>John Doe</strong> | April 19 2020
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic suscipit eligendi
exercitationem doloribus animi quasi sint quod, asperiores sed numquam saepe fuga, odit
vitae praesentium ea error! Esse voluptas laborum ratione minus blanditiis! Est,
voluptate? Veritatis ipsum natus quas ducimus.
</p>
</div>
</div>
</div>
</body>
CSS主要代碼：
.row {
display: flex;
}
.column1, .column2 {
height: 100%;
}
.row .column {
flex: 1;
flex-basis: 100%;
}
.column2 {
padding: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
line-height: 2rem;
}
img {
width: 100%;
height: 100%;
}
CSS移動代碼：
.column {
max-width: 100%;
flex: 100%;
}
.row {
flex-direction: column;
}
uj5u.com熱心網友回復：
改變你.column的
.column {
justify-content: center;
display: flex;
flex-direction: row;
overflow: hidden;}
和你的 img
img {
flex: 1;
height: 100%;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/415761.html
標籤：
上一篇：鍵盤突然消失的TextField