文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我试图创建3列与响应褪色渲染。我怎样才能让它们显示在一起，而不是在对方身上呢？

问我试图创建3列与响应褪色渲染。我怎样才能让它们显示在一起，而不是在对方身上呢？
EN

Stack Overflow用户
提问于 2021-04-17 14:27:41
回答 4查看 42关注 0票数 1

如何使这三列相互显示，而不是在另一列上显示？当然，我也希望他们的反应和褪色。

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

代码语言：javascript
复制
<!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，才能看到我的问题。

我一遍又一遍地增加文本，因为如果没有更多的文本内容，我无法提交我的问题。我一遍又一遍地增加文本，因为如果没有更多的文本内容，我无法提交我的问题。我一遍又一遍地增加文本，因为如果没有更多的文本内容，我无法提交我的问题。我一遍又一遍地增加文本，因为如果没有更多的文本内容，我无法提交我的问题。我一遍又一遍地增加文本，因为如果没有更多的文本内容，我无法提交我的问题。

html
css
rendering
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2021-04-17 20:27:32

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

代码语言：javascript
复制
<!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或可能的冗余，但它的工作，我需要！

票数 0
EN

Stack Overflow用户

发布于 2021-04-17 14:43:39

我想你必须使用css网格或柔性盒；

但是css网格是这里的最佳选择：

代码语言：javascript
复制
.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进行一些更改。

票数 0
EN

Stack Overflow用户

发布于 2021-04-17 15:47:33

我认为你可以尝试使用柔性盒(弯曲方向:行)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67139231

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档