如何在CSS中随字体大小增大同步增加div宽度？

现有如下CSS与HTML代码：

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 9px;
}
.wpwi_top {
    text-align: center;
}

.wpwi_outer {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    width: 100%;
}

.wpwi_row {
    display: flex;
    width:100%;
}

.wpwi_row>div:nth-child(1) {
    width: 13%;
    padding-left: 40%;
}

<div class="wpwi_main">
    <div class="wpwi_top">Top</div>
    <div class="wpwi_outer">
        <div>Outer</div>
    </div>
    <div class="wpwi_inner">
        <div class="wpwi_row">
            <div>Time</div>
            <div>8:02 PM</div>
        </div>
        <div class="wpwi_row">
            <div>Date</div>
            <div>13 Aug 2022</div>
        </div>
        <div class="wpwi_row">
            <div>Pressure</div>
            <div>999 hPa</div>
        </div>
        <div class="wpwi_row">
            <div>Visibility</div>
            <div>10000 Meter</div>
        </div>
        <div class="wpwi_row">
            <div>Cloudiness</div>
            <div>98%</div>
        </div>
        <div class="wpwi_row">
            <div>Sunrise</div>
            <div>5:37 AM</div>
        </div>
        <div class="wpwi_row">
            <div>Sunset</div>
            <div>6:39 PM</div>
        </div>
    </div>
</div>

当.wpwi_main设置font-size:9px时显示正常，改为20px后布局错位，需要让.wpwi_row>div:nth-child(1)的宽度随字体大小增大同步适配。

修复方案 #

问题根源是你给.wpwi_row>div:nth-child(1)设置了固定百分比宽度，同时搭配了大值左内边距，字体变大后标签文本的实际宽度超过了容器宽度，导致布局错乱。以下两种方式可解决：

方式一：利用Flex布局自适应宽度

修改.wpwi_row及其子元素样式，让第一个div自动适配内容宽度，同时保持整体居中：

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 20px; /* 任意字体大小都能适配 */
}
.wpwi_top {
    text-align: center;
}

.wpwi_outer {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    width: 100%;
}

.wpwi_row {
    display: flex;
    width:100%;
    justify-content: center; /* 内容整体居中 */
    gap: 15px; /* 标签与数值的间距，可按需调整 */
}

.wpwi_row>div:nth-child(1) {
    white-space: nowrap; /* 防止标签文本换行 */
    text-align: right; /* 标签右对齐，视觉更整齐 */
    /* 移除固定宽度和左内边距，让宽度自适应内容 */
}

方式二：用em单位替代百分比宽度

如果想保留左内边距的布局，把宽度单位换成em（相对父元素字体大小的单位），这样宽度会随字体同步缩放：

.wpwi_row>div:nth-child(1) {
    width: 6em; /* 数值可根据实际内容调整 */
    padding-left: 40%;
    white-space: nowrap; /* 防止文本换行 */
}

原理说明 #

• 百分比宽度基于父容器宽度计算，和字体大小无关，字体放大后内容容易超出容器导致错位。
• Flex布局的自适应宽度会根据内容自动调整，搭配justify-content: center能维持整体居中的布局效果。
• em单位是相对字体大小的长度单位，字体放大时，em对应的实际像素值也会同步增加，确保容器宽度适配内容。

内容的提问来源于stack exchange，提问作者abu abu