【发布时间】：2022-07-06 19:08:08
【问题描述】：
<!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">
<title>Document</title>
</head>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
main{
display: grid;
margin: 0 auto;
justify-content: center;
align-items: center;
gap: 20px;
width: min(95%, 70rem);
}
.card{
width: 100%;
background-color: gray;
max-width: 300px;
border-radius: 3px;
}
.image{
overflow: hidden;
border-radius: 3px;
}
p{
padding: 0 10px;
}
img{
display: block;
width: 100%;
height: auto;
border-radius: 3px;
}
@media screen and (min-width:768px) {
main{
gap: 0;
}
.image{
width: 50%;
}
.info{
padding: 10px;
width: 50%;
}
.card{
display: flex;
max-width: 700px;
}
.image-prop{
order: -1;
}
}
</style>
<body>
<main>
<div class="card">
<div class="info">
<h3>HELLO</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos veritatis tempore accusantium nostrum quos totam assumenda?</p>
</div>
<div class="image">
<img src="https://img.freepik.com/free-vector/abstract-background_53876-43362.jpg?t=st=1657102837~exp=1657103437~hmac=ab303095d44f1dcaf3f5f2471e9664950117406284d4b8f5bcc3fda35794a30f&w=740" alt="">
</div>
</div>
<div class="card">
<div class="info">
<h3>HELLO</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos veritatis tempore accusantium nostrum quos totam assumenda?</p>
</div>
<div class="image">
<img src="https://img.freepik.com/free-vector/abstract-background_53876-43362.jpg?t=st=1657102837~exp=1657103437~hmac=ab303095d44f1dcaf3f5f2471e9664950117406284d4b8f5bcc3fda35794a30f&w=740" alt="">
</div>
</div>
<div class="card">
<div class="info">
<h3>HELLO</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos veritatis tempore accusantium nostrum quos totam assumenda?</p>
</div>
<div class="image">
<img src="https://img.freepik.com/free-vector/abstract-background_53876-43362.jpg?t=st=1657102837~exp=1657103437~hmac=ab303095d44f1dcaf3f5f2471e9664950117406284d4b8f5bcc3fda35794a30f&w=740" alt="">
</div>
</div>
<div class="card">
<div class="info">
<h3>HELLO</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos veritatis tempore accusantium nostrum quos totam assumenda?</p>
</div>
<div class="image">
<img src="https://img.freepik.com/free-vector/abstract-background_53876-43362.jpg?t=st=1657102837~exp=1657103437~hmac=ab303095d44f1dcaf3f5f2471e9664950117406284d4b8f5bcc3fda35794a30f&w=740" alt="">
</div>
</div>
<div class="card">
<div class="info">
<h3>HELLO</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos veritatis tempore accusantium nostrum quos totam assumenda?</p>
</div>
<div class="image">
<img src="https://img.freepik.com/free-vector/abstract-background_53876-43362.jpg?t=st=1657102837~exp=1657103437~hmac=ab303095d44f1dcaf3f5f2471e9664950117406284d4b8f5bcc3fda35794a30f&w=740" alt="">
</div>
</div>
<div class="card">
<div class="info">
<h3>HELLO</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos veritatis tempore accusantium nostrum quos totam assumenda?</p>
</div>
<div class="image">
<img src="https://img.freepik.com/free-vector/abstract-background_53876-43362.jpg?t=st=1657102837~exp=1657103437~hmac=ab303095d44f1dcaf3f5f2471e9664950117406284d4b8f5bcc3fda35794a30f&w=740" alt="">
</div>
</div>
</main>
</body>
</html>
所以我在这里尝试做的是增加小屏幕尺寸的卡片 div 的高度，并设置大屏幕尺寸的媒体查询。 我真的不知道如何使该图像占据 div-(.card) 的剩余高度，当它处于 768px 时，它应该成为一个 flex 并占据剩余的宽度空间，因为它会并排对齐. p.s 我希望图像和文本在 .card 容器中具有相同的大小
【问题讨论】：