Question

在stackoverflow上阅读了一些帖子后，我尝试了一些方法让我的div并排放置，但没有任何成功。我以前从未使用过任何重要的CSS，所以我很难挣扎。

我有一个我想从页面右边缘滑入的幻灯片。滑块的左边应该有一个div，允许滑块被解散（在下面的代码中称为clickme），滑块的右边是包含一个包含carouFredSel的div（在下面的代码中称为image_carousel）

我有两个问题：

滑块不顺畅。我已尝试在＃slideout的过渡CSS属性中找到的所有内容，但滑块仍然只显示而不是从右侧滑动。
包含轮播（#image_carousel）的div不位于#clickme的右侧。我希望#slideout的左侧10％用#clickme占用，右侧的90％用#image_carousel占用。 #clickme确实占据了左边的10％，但是#image_carousel位于clickme的顶部，并且没有占据正确的90％。如果我对image_carousel有position = relative，那么它看起来好一点但仍然不对。

这是代码。我从他们网站上的例子中复制了carouFredSel的东西。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.carouFredSel-6.2.1.js"></script>

<style type="text/css">

    #slideout {
        position: absolute;
        top: 37%;
        right: -360px;
        width: 400px;
        min-height: 25%;
                  /* tried transform instead of width but no difference */
        transition: width 0.3s ease;
        -webkit-transition: width 0.3s ease;
        -moz-transition: width 0.3s ease;
        -ms-transition: width 0.3s ease;
        -o-transition: width 0.3s ease;
        overflow: auto;
        background: #34cbcb;
        -webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
        -moz-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
        box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    }
    .slide-away {
        transform: translate(-360px, 0);
        -webkit-transform: translate(-360px, 0);
        -moz-transform: translate(-360px, 0);
        -ms-transform: translate(-360px, 0);
        -o-transform: translate(-360px, 0);
    }

    #clickme {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 10%;
        float: left;
        background: #870C7E;
    }

</style>

<style type="text/css">

    .image_carousel {
        /* padding: 15px 0 15px 40px; */
        position: relative;

        margin-left: 10%;
    }
    .image_carousel img {
        border: 1px solid #ccc;
        background-color: white;
        padding: 9px;
        margin: 7px;
        display: block;
        float: left;
    }
    a.prev, a.next {
        background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) no-repeat transparent;
        width: 45px;
        height: 50px;
        display: block;
        position: absolute;
        top: 85px;
    }
    a.prev {            left: -22px;
                        background-position: 0 0; }
    a.prev:hover {      background-position: 0 -50px; }
    a.prev.disabled {   background-position: 0 -100px !important;  }
    a.next {            right: -22px;
                        background-position: -50px 0; }
    a.next:hover {      background-position: -50px -50px; }
    a.next.disabled {   background-position: -50px -100px !important;  }
    a.prev.disabled, a.next.disabled {
        cursor: default;
    }
    a.prev span, a.next span {
        display: none;
    }
    .pagination {
        text-align: center;
    }
    .pagination a {
        background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
        width: 15px;
        height: 15px;
        margin: 0 5px 0 0;
        display: inline-block;
    }
    .pagination a.selected {
        background-position: -25px -300px;
        cursor: default;
    }
    .pagination a span {
        display: none;
    }
    .clearfix {
        float: none;
        clear: both;
    }

</style>


<script>

$('#clickme').click(function() {
    $('#slideout').toggleClass('slide-away');
});

</script>

<div id="slideout">

    <div id="clickme">
        <img id="direction" class="chevron" src="left.PNG"/>
    </div>

    <div class="image_carousel">

        <div id="foo2">
            <img src="image1.bmp" alt="" width="60" height="60" />
            <img src="image2.bmp" alt="" width="60" height="60" />
            <img src="image3.bmp" alt="" width="60" height="60" />
            <img src="image4.bmp" alt="" width="60" height="60" />
            <img src="image5.jpg" alt="" width="60" height="60" />
            <img src="image6.jpg" alt="" width="60" height="60" />
        </div>

        <div class="clearfix"></div>

        <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
        <a class="next" id="foo2_next" href="#"><span>next</span></a>

        <div class="pagination" id="foo2_pag"></div>

    </div>

</div>

<script>

    $("#foo2").carouFredSel({
        circular: false,
        infinite: false,
        auto    : false,
        prev    : {
            button  : "#foo2_prev",
            key     : "left"
        },
        next    : {
            button  : "#foo2_next",
            key     : "right"
        },
        pagination  : "#foo2_pag"
    });

    $(function () {

        $("#slideout").hide();

        setTimeout(function(){
              $("#slideout").show();
              $("#direction").attr("src","right.PNG");
              $('#slideout').toggleClass('slide-away');
        },3000);
    });

 </script>

谢谢，

保

麻烦将CSS与CSS并排放置

0 个答案: