三个独立垂直滚动容器无法并排显示问题求助

问题根源 #

你的代码存在两个核心问题，直接导致容器无法正常显示：

1. HTML标签闭合错误：所有内部的<div class="scroll-text-*">都错误地用<div>替代</div>进行闭合，造成DOM结构混乱，后续容器被嵌套进第一个容器内，因此页面仅显示第一个容器。
2. 重复使用ID选择器：ID在HTML中必须唯一，你多次复用#scroll-container、#scroll-text-1和#scroll-text-2，浏览器只会识别第一个匹配元素，后续元素的样式无法生效。

修复后的完整代码 #

CSS（改用class选择器，保留原有动画逻辑） #

.scroll-container {
    height: 600px;
    width: 30%; /* 用百分比适配屏幕，避免总宽度溢出视口 */
    min-width: 200px;
    overflow: hidden;
    display: inline-block;
    margin: 0 5px; /* 添加间距避免容器挤在一起 */
}

.scroll-container img {
    max-width: 100%;
    max-height: 100%;
}

.scroll-text-up {
    height: 100%;
    transform: translateY(100%);
    animation: scroll-up 60s linear infinite;
}

.scroll-text-down {
    height: 100%;
    transform: translateY(-100%);
    animation: scroll-down 60s linear infinite;
}

@keyframes scroll-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(-550%);
    }
}

@keyframes scroll-down {
    from {
        transform: translateY(-550%);
    }
    to {
        transform: translateY(100%);
    }
}

HTML（修正标签闭合，替换为class） #

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="../css/article.css">
    <title>Artikelliste Page</title>
</head>

<body>
    <!-- 用flex容器包裹，确保并排布局更稳定 -->
    <div style="display: flex; flex-wrap: wrap; gap: 10px; padding: 10px;">
        <div class="scroll-container">
            <div class="scroll-text-up">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
        <div class="scroll-container">
            <div class="scroll-text-down">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
        <div class="scroll-container">
            <div class="scroll-text-up">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
    </div>
</body>
</html>

额外优化说明 #

• 将容器宽度改为30%并设置最小宽度，确保在不同尺寸屏幕下都能正常并排，不会溢出视口。
• 使用flex容器包裹滚动容器，比inline-block布局更稳定，可自动处理换行和间距问题。
• 为容器添加间距，提升整体视觉效果。

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