弹性布局,flex-direction: column;盒子宽度不随着上面盒子变化

需求大盒子里面的上面盒子药固定宽度下面的盒子要随着自己文字内容宽度,要把下面盒子变成行内块样式 这样就不随着上面盒子变化了

.nameInfo { //大盒子
                        margin-left: 28upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .nameInfo-t {//盒子上面
                            width: 300upx;
                            font-size: 36upx;
                            font-weight: 500;
                            color: #333333;
                        }

                        .nameInfo-b {//盒子下面
                            width: auto;
                            display: inline-block !important;
                            height: 40upx;
                            background-color: rgba(255, 93, 111, 0.08);
                            padding: 2upx 20upx 2upx 12upx;
                            box-sizing: border-box;
                            border-radius: 10upx;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            .imageStyle {
                                float: left;
                                image {
                                    width: 28upx;
                                    height: 30upx;
                                    margin-right: 4upx;
                                    margin-top: 4upx;
                                }
                            }

                            .nation {
                                float: left;
                                font-size: 24upx;
                                font-weight: 500;
                                color: #FF5D6F;
                            }
                        }
                    }

posted @ 2024-02-01 13:43  prince11  阅读(64)  评论(0编辑  收藏  举报