Jquery 100%可调整大小的div浮动在容器div内左侧

是否可以有一个包含X个子div的容器div，每个子div都可以在浏览器中100%调整大小？我知道它可以用一个背景完成，但不能用一行div。。。 这就是我打算做的（幻灯片放映，左/右滑动）：

HTML：

。。。和CSS：

#幻灯片展示容器{
z指数：0；
宽度：11520px；高度：1080px；
位置：相对位置；
}
.幻灯片图像{
宽度：1920像素；高度：1080像素；
浮动：左；
}

塔克斯

佩德罗

编辑1：我忘了提到每个div都包含一个图像。

---

编辑2：添加了我自己的更新。

我能想到的唯一方法是使用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%;
}

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

JS

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

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作为滑动量 只需向左或向右滑动幻灯片内容

HTML

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

---

您似乎已经定义了要使用的宽度，因此我建议使用最大宽度和100%宽度，看看这是否可以解决您的问题

#slideshowContainer {
  z-index: 0;
  width: 100%;
  max-width: 1520px; 
  position: relative;
}

.slideshowImage {
  width: 100%;
  max-width: 1920px; 
  float: left;
}

如果你省略了高度，它会自动计算出来。如果您不喜欢忽略高度，您可以像设置宽度一样设置高度

height: auto;
max-height: 1080px;

---

我希望这有帮助

以下是完整的工作版本：

定心是使用CSS完成的，javascript只是为了运行幻灯片

HTML:

<div id="slideshowWrapper">
    <div id="slideshowContent">
        <div id="slideshowImage_01" class="slideshowImage_container active"></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>

body, html {
    height: 100%;
    margin: 0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#slideshowContent {
    width: 400%; // 100% * number of slides
    height: 100%;
    position: relative;
}
#slideshowContent .slideshowImage_container {
    width: 25%; // 100% / number of slides
    height: 100%;
    float: left;
}

function slide() {
    var container = $('#slideshowContent'),
        nextDiv = container.find('.active').next('div'),
        slides = container.find('div'),
        next = nextDiv.length ? nextDiv : slides.first();

    slides.removeClass('active');
    next.addClass('active');
    $('#slideshowContent').animate({
        'left': '-' + next.index() * next.width() + 'px'
    }, 2000, function () {
        $(this).css({
            'left': '-' + next.index() * 100 + '%'
        });
    });

}

setInterval(function () {
    slide();
}, 5000);

JS:

<div id="slideshowWrapper">
    <div id="slideshowContent">
        <div id="slideshowImage_01" class="slideshowImage_container active"></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>

body, html {
    height: 100%;
    margin: 0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#slideshowContent {
    width: 400%; // 100% * number of slides
    height: 100%;
    position: relative;
}
#slideshowContent .slideshowImage_container {
    width: 25%; // 100% / number of slides
    height: 100%;
    float: left;
}

function slide() {
    var container = $('#slideshowContent'),
        nextDiv = container.find('.active').next('div'),
        slides = container.find('div'),
        next = nextDiv.length ? nextDiv : slides.first();

    slides.removeClass('active');
    next.addClass('active');
    $('#slideshowContent').animate({
        'left': '-' + next.index() * next.width() + 'px'
    }, 2000, function () {
        $(this).css({
            'left': '-' + next.index() * 100 + '%'
        });
    });

}

setInterval(function () {
    slide();
}, 5000);

---

这是100%可调整大小的，

#slideshowWrapper

可以设置为任何宽度/高度，内部的div可以正常工作。在设置动画后将CSS设置为百分比值，意味着在转换后div仍然可以调整大小。

您可能会感兴趣的是没有定位或浮动的水平CSS基础

body, html {
    height:100%;
    padding:0;
    margin:0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%; 
    height:100%;
}
#slideshowWrapper:hover {

}
#slideshowContent {
    height:100%;
    width:100%;
    text-indent:0;
    display:inline-block;
    white-space:nowrap;
}
.slideshowImage_container {
    height:100%;
    width:100%;
    display:inline-block;
    white-space:normal;
    text-indent:normal;
    text-align:center;
}
#slideshowImage_01 {
    background-color: #A0D0A8;
}
#slideshowImage_02 {
    background-color: #009FE3;
}
#slideshowImage_03 {
    background-color: #FCC99A;
}
#slideshowImage_04 {
    background-color: #D8B0CB;
}

将CSS动画作为额外内容：
（只是为了演出，js更为坚实） 不是很灵活，每次添加或删除容器时都需要设置它。

为什么文本缩进？ 因为它可以对文档在屏幕上显示的方向做出完美的反应。

---

它将滑动在父级或默认情况下设置的方向

+1代表你的形象。不管怎样，这有用吗？你试过使用%？是的，但没那么简单…@Pedro，事实上。我现在正在做一把提琴。提琴用的是Thanx。我认为div中的任何图像都没有调整大小-。@Pedro-我刚刚更新了you fiddle以使其正常工作-如果您只是在制作图像幻灯片，那么我建议您看一看：@Pedro-下面是一个快速的

反向拉伸

插件示例：

宽度：400%；//100%*幻灯片数量

使其非常静态，而不是dynamic@Si8-这可以通过内联样式使用js动态定义。答案的CSS只是一个例子。这很好，除了

400%

是一个静态宽度，那么如果其他人更新了内容会怎么样？现在有5个div，但只有400%的宽度：/@Si8然后在html/css中留下评论，告诉并解释如何在html更新之前更新css。如果您不想为此烦恼，那么使用javascript动态设置这些值，这是一个典型的js作业。除此之外，问题中没有DIV的随机数，我完全同意你的观点，问题并不是要求DIV具有动态性。