萌萌哒小天使

导航

CSS文字自适应div宽度

1、文字自适应宽度

<body>
    <div class="box">
       <div>大风起兮云飞扬</div>
       <div>安得猛士兮守四方</div>
       <div>威加海内兮归故乡</div>
    </div>
</body>
    .box{
        border:1px solid red;
    }
    .box div:nth-child(1){
        background-color: deepskyblue;
    }
    .box div:nth-child(2){
        background-color: yellow;
    }
    .box div:nth-child(3){
        background-color: darkcyan;
    }

在这里插入图片描述
从上面例子可以看出我们的div的宽度是继承了父级。

如果想要做到如下效果,我们只需简单几行代码即可实现。
在这里插入图片描述

关键代码如图:

    .box {
        border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

我们通过flex,改变了次轴的对齐方式,使其重新计算宽度。

posted on 2020-11-25 16:53  萌萌哒小天使  阅读(4971)  评论(0编辑  收藏  举报