旋转木马图像低于另一个堆叠

时间:2015-12-13 09:02:04

标签: html css carousel

我的网站包含许多包含页面的div,但由于某种原因,所有4个图像都显示为一个在另一个之下,而另一个堆叠在另一个之上。以下CSS包含与包含的HTML相关的所有CSS。如下所示,图片嵌入在白盒div中,而图像则垂直位于彼此之下。我不确定这是因为CSS /定位还是因为我的代码出了问题。请帮忙!

enter image description here

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;
        }

    }

1 个答案:

答案 0 :(得分:0)

.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>