首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >2列、不同高度的水平卡片

2列、不同高度的水平卡片
EN

Stack Overflow用户
提问于 2019-10-13 00:10:06
回答 1查看 386关注 0票数 0

我有一个问题的2列的卡片,其中左侧将是图像和右侧将是文本。但是我想让“右栏”的高度比“图像栏”的高度小3/4,并且在“左栏”中间的位置和按钮的位置总是在右卡的底部(固定位置),即使卡片中的文本不多。

我已经尝试了下面的代码,但它不能满足我的需求

https://jsfiddle.net/n0p4tbo9/

HTML

代码语言:javascript
复制
    <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

代码语言:javascript
复制
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

我希望输出应该是这样的图片https://imgur.com/ddblXo3

EN

Stack Overflow用户

回答已采纳

发布于 2019-10-13 00:22:18

您应该尝试使用display: grid;而不是display: flex;。无论是水平还是垂直定位项目,网格都比flex好得多。

这里有一个你的小提琴的叉子作为例子:https://jsfiddle.net/0hf51xaL/

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58356008

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档