我正在尝试创建具有响应式淡入淡出渲染的 3 列。如何让它们并排显示而不是叠放？

Question

如何让三列并排显示而不是重叠显示？当然我也希望他们有反应和褪色。

我的fiddle：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才能看到我的问题

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

Answer 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 进行一些更改。

Answer 2

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

Answer 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 或可能是冗余的，但它可以满足我的需要！

Answer 4

在网格中排列元素而不使用 bootstrap 等框架时，Flex 是您最好的朋友。这里有一个很好的资源供您使用：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

我正在尝试创建具有响应式淡入淡出渲染的 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?

html

css

rendering