html - 旋转木马图像依次堆叠-6ren

html - 旋转木马图像依次堆叠

转载作者：行者123 更新时间：2023-11-28 06:41:31

我的网站由许多页面换行的 div 组成，但由于某种原因，所有 4 张图片都显示为一张在另一张下方，彼此堆叠在一起。以下 CSS 包含与包含的 HTML 相关的所有 CSS。正如您在下面看到的，图片嵌入在白框 div 中，而图像则垂直放置在彼此下方。我不确定这是因为 CSS/定位还是因为我的代码有问题。请帮忙!

HTML:

                <!-- Content -->
                <div class="content">
                    <section>

                        <div class="image featured">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#myCarousel" data-slide-to="1"></li>
                                    <li data-target="#myCarousel" data-slide-to="2"></li>
                                    <li data-target="#myCarousel" data-slide-to="3"></li>
                                </ol>

                                <!-- Wrapper for slides -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="images/img_lathing2.jpg" alt="Lathing">
                                    </div>
                                    <div class="item">
                                        <img src="images/img_milling2.jpg" alt="Milling">
                                    </div>
                                    <div class="item">
                                        <img src="images/img_drilling2.jpg" alt="Drilling">
                                    </div>
                                    <div class="item">
                                        <img src="images/img_turning2.jpg" alt="Turning">
                                    </div>

                                    <div>

                                        <!-- LEFT AND RIGHT CONTROLS -->

                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>
                                        </a>
                                    </div>

                                </div>
                    </section>

                    </div>

CSS:

               /* Carousel */

            .carousel .item img {
                margin: 0 auto;
                width: 100%;
            }


            .carousel-inner > .item > img,
            .carousel-inner > .item > a > img {
                  width: 70%;
                  margin: auto;
              }
            /* circles */

            .carousel-indicators {
                bottom: 20px;
                position: absolute;
                left: 50%;
                z-index: 15;
                width: 60%;
                padding-left: 0;
                margin-left: -30%;
                text-align: center;
                list-style: none;
                margin-top: 0;
                margin-bottom: 10px;
                box-sizing: border-box;
                height: 100px;
                -webkit-margin-before: 1em;
                -webkit-margin-after: 1em;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;
                -webkit-padding-start: 40px;
            } 

        /* Image */

            .image {
                border: 0;
                position: relative;
            }

                .image:before {
                    /*background: url("images/overlay.png"); */
                    content: '';
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                }

                .image.fit {
                    display: block;
                }

                    .image.fit img {
                        display: block;
                        width: 100%;
                    }

                .image.featured {
                    display: block;
                    margin: 0 0 2em 0;
                }

                    .image.featured img {
                        display: block;
                        width: 100%;
                    }

    /* Wrapper */

        .wrapper {
            margin-bottom: 5em;
            padding: 5em;
        }

            .wrapper.style1 {
                padding: 0;
            }

            .wrapper.style2 {
                background-color: #83d3c9;
                background-image: url("images/light-bl.svg"), url("images/light-br.svg");
                background-position: bottom left, bottom right;
                background-repeat: no-repeat, no-repeat;
                background-size: 25em, 25em;
                color: #fff;
            }

                .wrapper.style2 .button:hover {
                    background: rgba(255, 255, 255, 0.15) !important;
                }

                .wrapper.style2 .button.special {
                    background: #fff;
                    border-color: #fff;
                    color: #83d3c9 !important;
                }

                    .wrapper.style2 .button.special:hover {
                        border-color: inherit !important;
                        color: #fff !important;
                    }

            .wrapper.style3 {
                background: #fff;
                color: inherit;
            }

            .wrapper.style4 {
                background: #fff;
                color: inherit;
                padding: 4em;
            }

/* Containers */

    .container {
        margin-left: auto;
        margin-right: auto;
    }

    .container.\31 25\25 {
        width: 100%;
        max-width: 1750px;
        min-width: 1400px;
    }

    .container.\37 5\25 {
        width: 1050px;
    }

    .container.\35 0\25 {
        width: 700px;
    }

    .container.\32 5\25 {
        width: 350px;
    }

    .container {
        width: 1400px;
    }

    @media screen and (max-width: 1680px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 1500px;
            min-width: 1200px;
        }

        .container.\37 5\25 {
            width: 900px;
        }

        .container.\35 0\25 {
            width: 600px;
        }

        .container.\32 5\25 {
            width: 300px;
        }

        .container {
            width: 1200px;
        }

    }

    @media screen and (max-width: 1280px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 1200px;
            min-width: 960px;
        }

        .container.\37 5\25 {
            width: 720px;
        }

        .container.\35 0\25 {
            width: 480px;
        }

        .container.\32 5\25 {
            width: 240px;
        }

        .container {
            width: 960px;
        }

    }

    @media screen and (max-width: 980px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 118.75%;
            min-width: 95%;
        }

        .container.\37 5\25 {
            width: 71.25%;
        }

        .container.\35 0\25 {
            width: 47.5%;
        }

        .container.\32 5\25 {
            width: 23.75%;
        }

        .container {
            width: 95%;
        }

    }

    @media screen and (max-width: 840px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 118.75%;
            min-width: 95%;
        }

        .container.\37 5\25 {
            width: 71.25%;
        }

        .container.\35 0\25 {
            width: 47.5%;
        }

        .container.\32 5\25 {
            width: 23.75%;
        }

        .container {
            width: 95% !important;
        }

    }

    @media screen and (max-width: 736px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 125%;
            min-width: 100%;
        }

        .container.\37 5\25 {
            width: 75%;
        }

        .container.\35 0\25 {
            width: 50%;
        }

        .container.\32 5\25 {
            width: 25%;
        }

        .container {
            width: 100% !important;
        }

    }

最佳答案

.carousel .item img {
                margin: 0 auto;
                width: 100%;
            }


            .carousel-inner > .item > img,
            .carousel-inner > .item > a > img {
                  width: 70%;
                  margin: auto;
              }
            /* circles */

            .carousel-indicators {
                bottom: 20px;
                position: absolute;
                left: 50%;
                z-index: 15;
                width: 60%;
                padding-left: 0;
                margin-left: -30%;
                text-align: center;
                list-style: none;
                margin-top: 0;
                margin-bottom: 10px;
                box-sizing: border-box;
                height: 100px;
                -webkit-margin-before: 1em;
                -webkit-margin-after: 1em;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;
                -webkit-padding-start: 40px;
            } 

        /* Image */

            .image {
                border: 0;
                position: relative;
            }

                .image:before {
                    /*background: url("images/overlay.png"); */
                    content: '';
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                }

                .image.fit {
                    display: block;
                }

                    .image.fit img {
                        display: block;
                        width: 100%;
                    }

                .image.featured {
                    display: block;
                    margin: 0 0 2em 0;
                }

                    .image.featured img {
                        display: block;
                        width: 100%;
                    }

    /* Wrapper */

        .wrapper {
            margin-bottom: 5em;
            padding: 5em;
        }

            .wrapper.style1 {
                padding: 0;
            }

            .wrapper.style2 {
                background-color: #83d3c9;
                background-image: url("images/light-bl.svg"), url("images/light-br.svg");
                background-position: bottom left, bottom right;
                background-repeat: no-repeat, no-repeat;
                background-size: 25em, 25em;
                color: #fff;
            }

                .wrapper.style2 .button:hover {
                    background: rgba(255, 255, 255, 0.15) !important;
                }

                .wrapper.style2 .button.special {
                    background: #fff;
                    border-color: #fff;
                    color: #83d3c9 !important;
                }

                    .wrapper.style2 .button.special:hover {
                        border-color: inherit !important;
                        color: #fff !important;
                    }

            .wrapper.style3 {
                background: #fff;
                color: inherit;
            }

            .wrapper.style4 {
                background: #fff;
                color: inherit;
                padding: 4em;
            }

/* Containers */

    .container {
        margin-left: auto;
        margin-right: auto;
    }

    .container.\31 25\25 {
        width: 100%;
        max-width: 1750px;
        min-width: 1400px;
    }

    .container.\37 5\25 {
        width: 1050px;
    }

    .container.\35 0\25 {
        width: 700px;
    }

    .container.\32 5\25 {
        width: 350px;
    }

    .container {
        width: 1400px;
    }

    @media screen and (max-width: 1680px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 1500px;
            min-width: 1200px;
        }

        .container.\37 5\25 {
            width: 900px;
        }

        .container.\35 0\25 {
            width: 600px;
        }

        .container.\32 5\25 {
            width: 300px;
        }

        .container {
            width: 1200px;
        }

    }

    @media screen and (max-width: 1280px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 1200px;
            min-width: 960px;
        }

        .container.\37 5\25 {
            width: 720px;
        }

        .container.\35 0\25 {
            width: 480px;
        }

        .container.\32 5\25 {
            width: 240px;
        }

        .container {
            width: 960px;
        }

    }

    @media screen and (max-width: 980px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 118.75%;
            min-width: 95%;
        }

        .container.\37 5\25 {
            width: 71.25%;
        }

        .container.\35 0\25 {
            width: 47.5%;
        }

        .container.\32 5\25 {
            width: 23.75%;
        }

        .container {
            width: 95%;
        }

    }

    @media screen and (max-width: 840px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 118.75%;
            min-width: 95%;
        }

        .container.\37 5\25 {
            width: 71.25%;
        }

        .container.\35 0\25 {
            width: 47.5%;
        }

        .container.\32 5\25 {
            width: 23.75%;
        }

        .container {
            width: 95% !important;
        }

    }

    @media screen and (max-width: 736px) {

        .container.\31 25\25 {
            width: 100%;
            max-width: 125%;
            min-width: 100%;
        }

        .container.\37 5\25 {
            width: 75%;
        }

        .container.\35 0\25 {
            width: 50%;
        }

        .container.\32 5\25 {
            width: 25%;
        }

        .container {
            width: 100% !important;
        }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="content">
                    <section>

                        <div class="image featured">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#myCarousel" data-slide-to="1"></li>
                                    <li data-target="#myCarousel" data-slide-to="2"></li>
                                    <li data-target="#myCarousel" data-slide-to="3"></li>
                                </ol>

                                <!-- Wrapper for slides -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="http://i.stack.imgur.com/5N4U9.jpg" alt="Lathing">
                                    </div>
                                    <div class="item">
                                        <img src="http://i.stack.imgur.com/5N4U9.jpg" alt="Milling">
                                    </div>
                                    <div class="item">
                                        <img src="http://i.stack.imgur.com/5N4U9.jpg" alt="Drilling">
                                    </div>
                                    <div class="item">
                                        <img src="http://i.stack.imgur.com/5N4U9.jpg" alt="Turning">
                                    </div>

                                    <div>

                                        <!-- LEFT AND RIGHT CONTROLS -->

                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>
                                        </a>
                                    </div>

                                </div>
                    </section>

                    </div>
					</div>
					</section>
					</div>

关于html - 旋转木马图像依次堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34249503/

文章推荐： javascript - 使用 .each() 从表行中创建嵌套对象

文章推荐： javascript - knockout : Nested observableArrays and Nested ForEach

文章推荐： javascript - Vuejs 嵌套组件、模板和使用 Modals

文章推荐： javascript - 将变量传递并保留到下一页 - AngularJS

delphi - 使用 Delphi 2010 构建的文件报告病毒/木马
我尝试通过电子邮件发送使用 Delphi 构建的 DLL 文件，但收到了拒绝电子邮件报告: “您的电子邮件被拒绝，因为它包含 Trojan.Delf-9364” 所以我将文件上传到 http://sc
javascript - Favicon.ico javascript 木马 - 它有什么作用？
Nod32 刚刚警告我有关嵌入到网站图标中的木马。我在这里复制了 favicon.ico 的内容: http://pastebin.com/BkD4tKNy 不幸的是，我对 Javascript 没
代码::阻止 MinGW Windows Defender 木马:Win32/Fuery.C!cl
我正在 Code::Blocks 20.03 和 MinGW(GCC Build-20200227-1 9.2.0，单独安装)中测试一个简单的“hello world”程序，但运行它时在控制台上没有消

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 旋转木马图像依次堆叠