我正在尝试使用响应式淡入淡出创建 3 列。如何让它们彼此相邻而不是彼此重叠显示？答案

【问题标题】：I am trying to create 3 columns with responsive fade rendering. How do I get them to display next to each other rather than on top of each other?我正在尝试使用响应式淡入淡出创建 3 列。如何让它们彼此相邻而不是彼此重叠显示？
【发布时间】：2021-04-17 14:27:41
【问题描述】：

如何让三列彼此相邻而不是彼此重叠显示？当然，我也希望它们能够响应并褪色。

我的小提琴：https://jsfiddle.net/Spleendrivel/dswufb78/3/

<!DOCTYPE html>
<html>

<head>
    <meta name="ac:base" content="/AlmostYou">
    <base href="/AlmostYou/">
    <style>
        /* Slider */
        /* Slideshow container */
        #slide-container-1 {
            position: relative;
            max-width: 100%;
            /* responsiveness */
        }

        /* Slider */
        /* Slideshow container */
        #slide-container-2 {
            position: relative;
            max-width: 100%;
            /* responsiveness */
        }

        /* Slider */
        /* Slideshow container */
        #slide-container-3 {
            position: relative;
            max-width: 100%;
            /* responsiveness */
        }

        /* First element to be in block mode for responsiveness */
        #slide-element-1 {
            display: block;
            /* to get the dimensions set */
            width: 100%;
            height: auto;
        }

        /* First element to be in block mode for responsiveness */
        #slide-element-4 {
            display: block;
            /* to get the dimensions set */
            width: 100%;
            height: auto;
        }

        /* First element to be in block mode for responsiveness */
        #slide-element-7 {
            display: block;
            /* to get the dimensions set */
            width: 100%;
            height: auto;
        }

        /* Other element to be in absolute position */
        #slide-element-2,
        #slide-element-3,
        #slide-element-5,
        #slide-element-6,
        #slide-element-8,
        #slide-element-9 {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* Style images */
        .slide-image {
            width: 100%;
            border-radius: 20px;
        }

        /* Style text */
        .slide-text {
            position: absolute;
            bottom: 10px;
            background-color: #0042b1bb;
            color: white;
            width: 100%;
            text-align: center;
            font-size: 1.5rem;
        }

        /* Animation settings for individual elements */
        /* For more images the animations have to be adjusted */
        #slide-element-1 {
            animation: fade-1 10s infinite;
            -webkit-animation: fade-1 10s infinite;
        }

        #slide-element-2 {
            animation: fade-2 10s infinite;
            -webkit-animation: fade-2 10s infinite;
        }

        #slide-element-3 {
            animation: fade-3 10s infinite;
            -webkit-animation: fade-3 10s infinite;
        }

        #slide-element-4 {
            animation: fade-4 10s infinite;
            -webkit-animation: fade-4 10s infinite;
        }

        #slide-element-5 {
            animation: fade-5 10s infinite;
            -webkit-animation: fade-5 10s infinite;
        }

        #slide-element-6 {
            animation: fade-6 10s infinite;
            -webkit-animation: fade-6 10s infinite;
        }

        #slide-element-7 {
            animation: fade-7 10s infinite;
            -webkit-animation: fade-7 10s infinite;
        }

        #slide-element-8 {
            animation: fade-8 10s infinite;
            -webkit-animation: fade-8 10s infinite;
        }

        #slide-element-9 {
            animation: fade-9 10s infinite;
            -webkit-animation: fade-9 10s infinite;
        }

        /* and more if there are more slides to show */
        @keyframes fade-1 {
            0% {
                opacity: 1;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fade-2 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 1;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-3 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-4 {
            0% {
                opacity: 1;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fade-5 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 1;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-6 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-7 {
            0% {
                opacity: 1;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fade-8 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 1;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-9 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>

</head>

<body>
    <div class="row">
        <div class="column">
            <div id="slide-container-1">
                <div id="slide-element-1">
                    <img class="slide-image" src="barn-3.jpg">
                </div>
                <div id="slide-element-2">
                    <img class="slide-image" src="barn-2.jpg">
                </div>
                <div id="slide-element-3">
                    <img class="slide-image" src="barn-1.jpg">
                </div>
            </div>
        </div>
        <div class="column">
            <div id="slide-container-2">
                <div id="slide-element-4">
                    <img class="slide-image" src="cat-1.jpg">
                </div>
                <div id="slide-element-5">
                    <img class="slide-image" src="cat-2.jpg">
                </div>
                <div id="slide-element-6">
                    <img class="slide-image" src="cat-3.jpg">
                </div>
            </div>
        </div>
        <div class="column">
            <div id="slide-container-3">
                <div id="slide-element-7">
                    <img class="slide-image" src="dog-2.jpg">
                </div>
                <div id="slide-element-8">
                    <img class="slide-image" src="dog-1.jpg">
                </div>
                <div id="slide-element-9">
                    <img class="slide-image" src="dog-3.jpg">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

确保屏幕宽度不超过 350 才能看到我的问题。

我一遍又一遍地添加额外的文本行，因为没有更多文本内容我无法提交我的问题。我一遍又一遍地添加额外的文本行，因为没有更多文本内容我无法提交我的问题。我一遍又一遍地添加额外的文本行，因为没有更多文本内容我无法提交我的问题。我一遍又一遍地添加额外的文本行，因为没有更多文本内容我无法提交我的问题。我一遍又一遍地添加额外的文本行，因为没有更多文本内容我无法提交我的问题。

【问题讨论】：

这是不能使用引导程序的业务需求吗？网格系统是在那里预定义的。如果是，您将不得不使用像 here 这样的 flexbox

标签： html css rendering

【解决方案1】：

我猜你必须使用 CSS 网格或 flexbox；
但是这里的 CSS 网格是最好的选择：

.row {
      display: grid;
      grid-templates-rows: auto; // you can add columns as many as you want..
      grid-templates-columns: repeat(3, 1fr); //.. but you will get 3 columns for each row

  }

如果不起作用，那么您必须对您的 css 进行一些更改。

【讨论】：

【解决方案2】：

我认为你可以尝试使用 flexbox (flex-direction: row)

【讨论】：

【解决方案3】：

这是最终答案：我的 JSFiddle：https://jsfiddle.net/Spleendrivel/mcyvpx3r/2/

<!DOCTYPE html>
<html>

<head>
    <meta name="ac:base" content="/AlmostYou">
    <base href="/AlmostYou/">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial;
        }

        .header {
            text-align: center;
            padding: 32px;
        }

        .row {
            display: -ms-flexbox;
            /* IE10 */
            display: flex;
            -ms-flex-wrap: wrap;
            /* IE10 */
            flex-wrap: wrap;
            padding: 0 4px;
        }

        /* Create four equal columns that sits next to each other */
        .column {
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        .column img {
            margin-top: 8px;
            vertical-align: middle;
            width: 100%;
        }

        .fadein-1 img {
            position: absolute;
            top: 0;
            -webkit-animation-name: fade;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 6s;
            animation-name: fade;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        .fadein-2 img {
            position: absolute;
            top: 0;
            -webkit-animation-name: fade;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 6s;
            animation-name: fade;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        .fadein-3 img {
            position: absolute;
            top: 0;
            -webkit-animation-name: fade;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 6s;
            animation-name: fade;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        @-webkit-keyframes fade {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            33% {
                opacity: 1;
            }

            53% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            33% {
                opacity: 1;
            }

            53% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        #f2 {
            -webkit-animation-delay: -4s;
        }

        #f3 {
            -webkit-animation-delay: -2s;
        }

        #f5 {
            -webkit-animation-delay: -4s;
        }

        #f6 {
            -webkit-animation-delay: -2s;
        }

        #f8 {
            -webkit-animation-delay: -4s;
        }

        #f9 {
            -webkit-animation-delay: -2s;
        }
    </style>

</head>


<body>

    <div class="row">
        <div class="column">
            <div class="fadein-1">
                <img id="f3" src="http://snaklvr.com/barn-3.jpg">
                <img id="f2" src="http://snaklvr.com/barn-2.jpg">
                <img src="http://snaklvr.com/barn-1.jpg">
            </div>
        </div>
        <div class="column">
            <div class="fadein-2">
                <img src="http://snaklvr.com/cat-3.jpg">
                <img id="f5" src="http://snaklvr.com/cat-2.jpg">
                <img id="f6" src="http://snaklvr.com/cat-1.jpg">
            </div>
        </div>
        <div class="column">
            <div class="fadein-3">
                <img src="http://snaklvr.com/dog-3.jpg">
                <img id="f8" src="http://snaklvr.com/dog-2.jpg">
                <img id="f9" src="http://snaklvr.com/dog-1.jpg">
            </div>
        </div>
    </div>
</body>

</html>

我确信有一些不必要的 CSS 或可能是冗余，但它可以按我的需要工作！

【讨论】：

【解决方案4】：

Flex 是您在网格中排列元素而不使用诸如 bootstrap 之类的框架时最好的朋友。这是一个很好的资源：@987654321@

另外，如果任何答案解决了您的问题，请将其标记为已接受。

【讨论】：