如何让一张卡片的大小根据其内的内容来调整?

目前我有一个可折叠的,一旦点击就会出现一个卡片。在这个卡片中,我有一个包含一组元素的段落标签。然而,就目前而言,这个卡片是一个固定的大小。如果可能的话,我希望根据段落标签和其中所有元素的大小调整卡片的宽度。因此,它将防止段落标签内的任何元素进入第二行。相反,卡片的宽度会相应地增加或减少。

这是我的HTML,包含了这个卡片。

<div class="collapse" id="@target">
      <div class="card card-body w-25 p-3 collapsible cardCollapsible" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]">
            <p class="paragraphStyling">
                <input type="checkbox" id="itemCheck" /> @dataLineItem.Split(Model.CategoryList.delimiterChar)[0] <button class="btn"><i class="fas fa-trash tertiaryDeleteIcon"></i></button> <button class="btn"><i class="fas fa-edit tertiaryEditIcon"></i></button>
            </p>
      </div>
</div>

这是目前我为卡片本身设计的CSS。

.cardCollapsible 
{
    margin-top: 20px;
}

我想让卡片在页面中居中,所以最终卡片的宽度会向左右两边调整。

解决方案:

我设法通过一个非常简单的,而且很可能是非常明显的修复方法来解决这个问题,我只需要从卡片本身的类定义中删除 “w-25″。

在卡片的CSS中,我使用了width: auto,这样可以动态调整卡片的宽度。

在下面找到用于将卡片的段落内容居中以及动态扩展其大小的CSS。

.cardCollapsible {
    margin-top: 20px;
    width: auto;
    height: 100px;
    display: table;
}

.paragraphStyling {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

希望能帮到想做同样事情的人!

给TA打赏
共{{data.count}}人
人已打赏
未分类

在熊猫中使用概率列随机抽样行。

2022-9-9 2:23:19

未分类

翩翩起舞 :- 行列布局-文字溢出和间隔符消失。

2022-9-9 2:23:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索