我有一个问题的2列的卡片,其中左侧将是图像和右侧将是文本。但是我想让“右栏”的高度比“图像栏”的高度小3/4,并且在“左栏”中间的位置和按钮的位置总是在右卡的底部(固定位置),即使卡片中的文本不多。
我已经尝试了下面的代码,但它不能满足我的需求
https://jsfiddle.net/n0p4tbo9/
HTML
<div class="row">
<div class="col-12 mt-3">
<div class="card">
<div class="card-horizontal">
<div class="img-square-wrapper">
<img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
</div>
</div>CSS
.card-horizontal {
display: flex;
flex: 1 1 auto;
}我希望输出应该是这样的图片https://imgur.com/ddblXo3
发布于 2019-10-13 00:22:18
您应该尝试使用display: grid;而不是display: flex;。无论是水平还是垂直定位项目,网格都比flex好得多。
这里有一个你的小提琴的叉子作为例子:https://jsfiddle.net/0hf51xaL/
https://stackoverflow.com/questions/58356008
复制相似问题