Javascript 无法使用CSS并排定位div

读了几篇关于stackoverflow的帖子后，我尝试了一些方法让我的div并排放置，但都没有成功。我以前从未以任何有意义的方式使用过CSS，所以我很挣扎

我有一个幻灯片，我想从页面的右边缘滑入。滑块的左边缘应该有一个div，用于关闭滑块（在下面的代码中称为clickme），滑块的右侧包含一个div（在下面的代码中称为image_carousel），其中包含一个carouFredSel

我有两个问题：

滑块不能顺利滑出。我已经尝试了在#slideout的transition CSS属性中可以找到的所有东西，但是滑块仍然只是出现，而不是从右侧滑动

包含旋转木马（#image_carousel）的div未定位在#clickme的右侧。我想让#滑出，左侧10%使用#clickme，右侧90%使用#image#U carousel。#clickme确实占据了左侧的10%，但是#image#U旋转木马位于clickme的顶部，也没有占据右侧的90%。如果我有图像旋转木马的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>

#滑出{
位置：绝对位置；
最高：37%；
右：-360px；
宽度：400px；
最小高度：25%；
/*尝试转换而不是宽度，但没有差异*/
过渡：宽度0.3s；
-webkit过渡：宽度0.3s；
-moz过渡：宽度0.3s；
-ms过渡：宽度0.3s；
-o型过渡：宽度0.3s；
溢出：自动；
背景：#34cbcb；
-webkit盒阴影：插图-34px 0px 65px-28px rgba（0,0,0,0.55）；
-moz盒阴影：嵌入-34px 0px 65px-28px rgba（0,0,0.55）；
盒影：嵌入-34px 0px 65px-28px rgba（0,0,0,0.55）；
}
.溜走{
转换：转换（-360px，0）；
-webkit转换：转换（-360px，0）；
-moz变换：平移（-360px，0）；
-ms变换：平移（-360px，0）；
-o变换：平移（-360px，0）；
}
#点击我{
位置：绝对位置；
顶部：0px；
左：0px；
身高：100%；
宽度：10%；
浮动：左；
背景：#870C7E；
}
.图像传送带{
/*填充：15px 0 15px 40px*/
位置：相对位置；
左边距：10%；
}
.图像传送带图像{
边框：1px实心#ccc；
背景色：白色；
填充：9px；
利润率：7px；
显示：块；
浮动：左；
}
a、 上一篇，下一篇{
背景：url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png)无重复透明；
宽度：45px；
高度：50px；
显示：块；
位置：绝对位置；
顶部：85px；
}
a、 前{左：-22px；
背景位置：0；}
a、 上一个：悬停{背景位置：0-50px；}
a、 prev.disabled{背景位置：0-100px！重要；}
a、 下一个{右：-22px；
背景位置：-50px 0；}
a、 下一步：悬停{背景位置：-50px-50px；}
a、 next.disabled{背景位置：-50px-100px！重要；}
a、 上一个禁用，下一个禁用{
游标：默认值；
}
a、 上一个span，a.下一个span{
显示：无；
}
.分页{
文本对齐：居中；
}
.页码a{
背景：url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png)0-300px无重复透明；
宽度：15px；
高度：15px；
边距：0 5px 0 0；
显示：内联块；
}
.分页a.已选定{
背景位置：-25px-300px；
游标：默认值；
}
.分页跨距{
显示：无；
}
.clearfix{
浮动：无；
明确：两者皆有；
}
$（'#clickme'）。单击（函数（）{
$（'#slideout'）。toggleClass（'slide-away'）；
});
美元（“#foo2”）。卡鲁弗雷德塞尔({
通告:错,，
无限：错，
汽车：错，
上一页：{
按钮：“#foo2_prev”，
键：“左”
},
下一步：{
按钮：“下一步”，
关键：“对”
},
页码：“foo2#u pag”
});
$（函数（）{
$（“#滑出”）.hide（）；
setTimeout（函数（）{
$（“#滑出”）.show（）；
$（“#direction”）.attr（“src”，“right.PNG”）；
$（'#slideout'）。toggleClass（'slide-away'）；
},3000);
});

谢谢

---

保罗

请你做一个动作来展示一下好吗？@Adam谢谢你的回答。我以前从未使用过JSFIDLE。我刚刚创建了这个：。它比我在Chrome或IE中打开时工作得更好，因为至少我可以单击紫色区域，然后滑出部分再次滑开。这在IE或Chrome中不会发生。我在#clickme click处理程序上有一个断点，但它从未被命中。我认为问题在于caroufredsel使用类carousel_包装器创建一个div的方式，该包装器包装了foo2 div。它有许多“动态计算”的属性。我认为caroufredsel弄错了——不确定这是因为caroufredsel有缺陷，还是因为我设置的某些内容导致它计算了不正确/不合适的值。