CSS响应式布局求助：艺人卡片PC/移动端样式适配异常

正在开发页面的“Top Artists”板块：

• 预期效果：
  • PC端：卡片为竖版矩形（高度大于宽度），排名在顶部、图片居中、艺人名称在底部；所有卡片宽高一致，横向排列（#1卡片在左，#5卡片在右）。
  • 移动端：卡片为横版矩形（宽度大于高度），排名在左侧、图片居中、艺人名称在右侧；所有卡片宽高一致。
• 当前问题：PC端卡片效果符合预期，但“Top Artists”标题居左而非居上；移动端卡片宽度不一致。

• PC端当前效果截图：
  
• 移动端当前效果截图：
  

CSS 代码 #

.top-artists {
    text-align: center;
    margin-top: 30px;
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
}

.artist-card {
    display: inline-block;
    margin: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    flex: 1;
}

.artist-card:hover {
    transform: scale(1.05);
}

.artist-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1DB954;
}

.artist-info h3 {
    margin: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.artist-rank {
    font-size: 20px; 
    font-family: 'Gotham', sans-serif; 
    color: #1DB954; 
    margin-right: 10px; 
    font-weight: bold;
    margin-bottom: 10px;
}

.artist-name {
    font-size: 18px; 
    font-family: 'Gotham', sans-serif; 
    color: #000;
    margin-top: 10px;
    font-weight: bold;
}

.top-artists-container {
    text-align: center;
}

@media (max-width: 500px) {
    .top-artists {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .artist-card {
        margin: 10px 0; 
        display: flex; 
        justify-content: space-evenly;
        flex: 1;
    }
    .artist-image {
        flex: 0 0 100px; 
        margin-right: 10px;
    }
    .artist-name {
        flex-grow: 1; 
        font-size: 18px;
        font-family: 'Gotham', sans-serif;
        color: #000;
        font-weight: bold;
    }
}

HTML 结构 #

<div class="top-artists-container">
    <div class="top-artists" style="margin-bottom: 30px;">
        <h2 class="section-title">Top Artists</h2>
        {% for artist in top_artists %}
        <div class="artist-card">
            <!-- Get the artist image URL from the dictionary using the artist's name as the key -->
            {% set artist_image_url = top_artists_images_by_name.get(artist) %}
            <div class="artist-rank">#{{ loop.index }}</div>
            <div class="artist-image">
                <!-- Use the artist_image_url obtained from the dictionary -->
                <img src="{{ artist_image_url }}" alt="Artist Image">
            </div>
            <div class="artist-name">{{ artist }}</div>
        </div>
        {% endfor %}
    </div>
</div>

• 将@media中的display: flex;改为display: block;，效果不符合预期：
  
• 在@media中添加width:100%，卡片宽度一致，但仍为竖版布局（排名在上、图片居中、艺人名在下），无法实现预期的横版布局：
  

修复PC端标题位置问题 #

当前标题与卡片同属.top-artists flex容器，导致横向排列。需调整结构和样式：

1. 修改HTML，将标题移出flex容器：

<div class="top-artists-container">
    <h2 class="section-title">Top Artists</h2>
    <div class="top-artists" style="margin-bottom: 30px;">
        {% for artist in top_artists %}
        <div class="artist-card">
            {% set artist_image_url = top_artists_images_by_name.get(artist) %}
            <div class="artist-rank">#{{ loop.index }}</div>
            <div class="artist-image">
                <img src="{{ artist_image_url }}" alt="Artist Image">
            </div>
            <div class="artist-name">{{ artist }}</div>
        </div>
        {% endfor %}
    </div>
</div>

2. 添加标题样式确保居中：

.section-title {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

修复移动端卡片布局问题 #

调整移动端样式，实现横向布局且宽度一致：

@media (max-width: 500px) {
    .top-artists {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* 卡片撑满容器宽度 */
        padding: 0 10px; /* 避免贴边 */
    }
    .artist-card {
        margin: 10px 0; 
        display: flex; 
        align-items: center; /* 内部元素垂直居中 */
        width: 100%; /* 强制宽度一致 */
        flex: none; /* 取消弹性增长 */
        padding: 15px;
    }
    .artist-rank {
        flex: 0 0 auto;
        margin-bottom: 0;
        margin-right: 15px;
    }
    .artist-image {
        flex: 0 0 80px;
        margin-right: 15px;
    }
    .artist-image img {
        width: 80px;
        height: 80px;
    }
    .artist-name {
        flex-grow: 1; 
        display: flex;
        align-items: center;
        margin-top: 0;
    }
}

优化PC端卡片一致性 #

给PC端卡片添加固定宽度，确保所有卡片尺寸统一：

.artist-card {
    display: inline-block;
    margin: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    flex: 0 0 150px; /* 固定宽度 */
    text-align: center;
}

以上调整后，PC端标题会居中显示在卡片上方，移动端卡片将变为横向布局且宽度一致，符合预期效果。

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