gpt4 book ai didi

css - Flexbox - 卡片中的内容均匀分布

转载 作者:太空宇宙 更新时间:2023-11-04 07:04:51 25 4
gpt4 key购买 nike

这可能是一个非常简单的答案,但它让我感到沮丧。我有一个并排放置 2 个元素的 flex 容器;一面有图像,另一面有内容。在内容中,它在水平和垂直方向上都居中,但内容非常紧密地相互堆叠(标题、文本、按钮)。有没有办法让它们围绕卡片的高度均匀分布?

#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#container-image>img {
display: block;
width: 100%;
}

#container-image {
flex: 1;
}

#container-content {
flex: 2;
align-self: center;
text-align: center;
}

.button {
background-color: blue;
color: white;
padding: 6px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
border: 1px solid #34495e;
}
HTML:

<section id="container">
<div id="container-image">
<img src="https://www.placecage.com/c/1500/2000" alt="" />
</div>

<div id="container-content">
<h3>title</h3>
<p>some text about this card</p>
<a class="button">more...</a>
</div>
</section>

最佳答案

考虑使用列方向的文本的另一个 flexbox 容器,然后您可以轻松地将它们按照您想要的方式隔开:

#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#container-image>img {
display: block;
width: 100%;
}

#container-image {
flex: 1;
}

#container-content {
flex: 2;
text-align: center;
display:inline-flex;
flex-direction:column;
justify-content:space-evenly; /*you can also use space-between OR space-around*/
}

.button {
background-color: blue;
color: white;
padding: 6px 30px;
text-align: center;
display: inline-block;
align-self:center;
font-size: 16px;
border: 1px solid #34495e;
}
<section id="container">
<div id="container-image">
<img src="https://www.placecage.com/c/1500/2000" alt="" />
</div>

<div id="container-content">
<h3>title</h3>
<p>some text about this card</p>
<a class="button">more...</a>
</div>
</section>

关于css - Flexbox - 卡片中的内容均匀分布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51698302/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com