html - 具有 2 列和不同高度的水平卡片

Question

我对卡片的 2 列有疑问，其中左侧是图像，右侧是文本。但是我想让“右栏”的高度比“图像栏”的高度小3/4，并且位置在“左栏”的中间，按钮位置总是在右卡的底部(固定位置)甚至卡片中的文字也不多。

我试过下面的代码，但它不符合我的需要

https://jsfiddle.net/n0p4tbo9/

HTML

<div class="container-fluid">
    <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

Answer 1

您应该尝试使用 display: grid; 而不是 display: flex;。在水平和垂直定位元素方面，网格比 flex 好得多。

这里有一个你的 fiddle 的分支作为例子:https://jsfiddle.net/0hf51xaL/