100%可调整大小的div漂浮在容器div内

Question

是否可以使用带有X子div的容器div,每个div可在浏览器中调整100%？我知道它可以用一个背景来完成,但不能用一行div ...这就是我打算做的事情(左/右滑动的幻灯片):

HTML:

<div id="slideshowContent">
  <div id="slideshowImage_01" class="slideshowImage_container"></div>
  <div id="slideshowImage_02" class="slideshowImage_container"></div>
  <div id="slideshowImage_03" class="slideshowImage_container"></div>
  <div id="slideshowImage_04" class="slideshowImage_container"></div>
</div> <!-- End of id="slideshowContent" -->

......和CSS:

#slideshowContainer {
  z-index: 0;
  width: 11520px; height: 1080px;
  position: relative;
}

.slideshowImage {
  width: 1920px; height: 1080px;
  float: left;
}

感谢名单.

佩德罗

编辑1:我忘了提到每个div包含一个图像.

编辑2:添加了我自己更新的FIDDLE.

Answer 1

我能想到的唯一方法是使用javascript

CSS

#SlideShow {
    width:100%;
    overflow-x:hidden;
    position: relative;
}

#slideshowContent {
  z-index: 0;
  width: 11520px; 
  height: 1080px;
  position:absolute;
  left:0px;
  top:0px;
}

.slideshowImage_container img {
  max-width:100%;
}

JS

window.slideWidth = 0;
jQuery(document).ready(function(){
    window.onresize = funciton() {
        var window.slideWidth = jQUery("#SlideShow").width();
        jQuery("#slideshowContent slideshowImage_container").css("width",window.slideWidth+"px");
        jQuery("#slideshowContent").css("left","0px"); //or adjust the left to the current slide show image since they are now different lengths and the slideshow will be off.
    }
    window.resize();
});

并设置您的滑动技术以使用 window.slideWidth 作为滑动量并且只需#slideshowContent向左或向右滑动。

超文本标记语言

<div id="SlideShow">
  <div id="slideshowContent">
    <div id="slideshowImage_01" class="slideshowImage_container"></div>
    <div id="slideshowImage_02" class="slideshowImage_container"></div>
    <div id="slideshowImage_03" class="slideshowImage_container"></div>
    <div id="slideshowImage_04" class="slideshowImage_container"></div>
  </div>
</div>