我正在尝试添加两个高度不同的图片和一些文本(文本高度也不同)。我使用Grid来创建具有相同高度的带有图像的div(不想使用高度,因为我不知道图像的高度)。
我不知道为什么当我使用display:grid
时,文本会在div的中间对齐。有什么想法吗?我找不出原因。
* {
box-sizing: border-box;
}
.magazine-items {
width: 500px;
display: flex;
flex-flow: row wrap;
align-items: start
}
.magazine-item {
width: 50%;
display: grid;
border: 1px solid red;
}
.magazine-item img {
width: 100%;
}
.double-text {
width: 80%;
margin: auto;
}
<div class="magazine-items">
<div class="magazine-item">
<div class="img">
<img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
</div>
<div class="text">
<p>Porovnání detailů designu série Elle a Effe</p>
</div>
</div>
<div class="magazine-item">
<div class="img">
<img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
</div>
<div class="text">
<p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
</div>
</div>
</div>
grid-template-rows:auto 1fr
,或者在弹性容器上使用align-items:flex-start
。 - Temani Afif.magazine-item {align-items: start}
。 - RadekF