Question

我需要设计一些信息卡，并且我想征询您有关最佳实践的意见，因为有很多方法。

这是我的布局应为的样子：

我将flexbox用于容器，但我真正的问题是关于卡片设计本身。

我将卡分为两列，并尝试了几种方法：

        <div class="new-card">
            <div class="col1">
                <span class="card-icon icon icon-dashboard_overview"></span>
            </div>
            <div class="col2">
                <div class="number">10</div>
                <div class="caption">Videos</div>
                <div class="info">App Launches</div>
            </div>
        </div>

（请注意，图标和主要编号的字体大小是50px。）

仅flexbox：

new-card {
    display: flex;
    width: 200px;
    padding: 10px;
    height: auto;
}

.col1 {
    width: 33%;
    height: auto;
}

.col2 {
    display: flex;
    flex-direction: column;
    width: auto;
    justify-content: flex-start;
    width: 64%;
    height: auto;
    padding-top: 13px;
}

看起来像这样：

CSS网格：

    .new-card {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-auto-rows: auto;
        padding: 10px;
        width: 170px;
    }

    .col1 {

    }

    .col2 {
        padding-top: 13px;
    }
.caption {
    margin-top: 10px;
    padding-left: 15px;
}

看起来像这样：

我对结果不太满意，因此我尝试使用绝对内部相对位置。这种方法给了我最好的结果，因为我可以完全按照需要放置元素，而无需给大字体编号div填充填充：

.new-card {
    display: flex;
    padding: 10px;
    width: 150px;
    height: 80px;
}
.col1 {
    width: 33%;
}
.col2 {
    width: 66%;
    position: relative;
}
.number {
    font-size: 50px;
    position: absolute;
    top: 13px;
}
.caption {
    position: absolute;
    top: 44px;
    left: 12px;
}
.info {
    position: absolute;
    top: 61px;
    right: 3px;
}

这是结果：

我的问题是：

您将如何处理？
如何在不填充的情况下将大字体编号与图标div对齐还是保证金？
最快的响应方式是什么？

提前谢谢！：）

布置信息卡的最佳方法

0 个答案: