CSS border-radius不生效及列元素无法撑满容器问题求助

云上老周

2026-7-10

问题解决方案

1. 元素圆角无法显示的问题

你的.weather容器使用position: fixed; left: 50%; right: 50%;的写法无法正确居中，导致内部带圆角的元素位置偏移，圆角可能被移出可视区域或显示异常。

修改方案：
修正.weather的居中方式，通过transform实现水平居中：

.weather {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

调整后，.header、.ablock等元素的圆角就能正常显示在可视区域内。

2. 列元素无法延伸到容器底部的问题

你用column-count: 3;实现三栏布局，但这种方式更适合文本分栏，对于区块式布局，Flexbox能更好地让子元素填满容器高度。

修改方案：

将.ablock改为Flex布局，替代分栏属性
给每个分栏区块设置flex:1，让它们均分容器宽度，同时用Flex布局实现内部元素垂直居中并填满容器高度

修改后的代码：

.weather .body .ablock {
    display: flex;
    gap: 20px; /* 替代column-gap */
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 25px;
    margin-left: 15px;
    width: 90%;
    height: 105px;
}

/* Particion A */
.weather .body .ablock .aparticion {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-right: 1px solid #333333;
    padding: 0;
}

/* Particion B */
.weather .body .ablock .bparticion {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-right: 1px solid #333333;
    padding: 0;
}

/* Particion C */
.weather .body .ablock .cparticion {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    padding: 0;
}