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

【问题标题】：100% resizable divs floating left inside container div100% 可调整大小的 div 漂浮在容器 div 内
【发布时间】：2013-05-30 22:50:10
【问题描述】：

是否可以有一个带有 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。

【问题讨论】：

+1 为您的图像。无论如何，这有帮助吗？ viralpatel.net/blogs/…
你尝试过类似使用 % 的方法吗？
是的，但没那么简单……
@Pedro 实际上是这样。我现在正在制作小提琴。

标签： jquery css slideshow

【解决方案1】：

也许你会对没有定位和浮动的水平 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;
}

http://jsfiddle.net/GCyrillus/PfbnW/1/

额外添加 CSS 动画：
（只是为了展示，js更扎实）不太灵活，每次添加或删除容器时都需要设置。

#slideshowWrapper {
    animation: slidemeAnyDir 30s infinite;
    animation-play-state:running;
}
#slideshowWrapper:hover {
    animation-play-state:paused;
}

@keyframes slidemeAnyDir {
      0%, 15%, 100%      {text-indent:0;}
    17%, 32%,  84%, 98%  {text-indent:-100%;}
    34%, 49%,  68%, 82%  {text-indent:-200%;}
    51%, 66%%            {text-indent:-300%;}
}

为什么是文本缩进？因为它可以对文档在屏幕上显示的方向做出完美的反应。它将在父级或默认情况下设置方向的两侧滑动。

【讨论】：

这很好，除了400% 是一个静态宽度，那么如果内容被其他人更新了怎么办？现在有 5 个 DIV 但只有 400% 宽度：/
@Si8 然后在 html/css 中留言告诉和解释如何在前面的 HTML 更新中更新 CSS。如果您不想为此烦恼，请使用 javascript 动态设置这些值，这是典型的 js 工作。除了 DIV 的随机数不在问题中
我绝对同意你的观点，问题不是要求 div 的动态 #。

【解决方案2】：

这是完整的工作版本：http://jsfiddle.net/y9zcf/7/

居中是使用 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>

CSS：

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

JS：

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 设置为 after 动画百分比值意味着 div 在过渡后仍可调整大小。

【讨论】：

感谢小提琴。我认为 div 中的任何图像都没有调整大小 - Your Fiddle.
@Pedro - 我刚刚更新了你的小提琴以使其工作 - jsfiddle.net/eEgnQ/1 - 如果你只是制作图像幻灯片，那么我建议你看看：srobbin.com/jquery-plugins/backstretch
@Pedro - 这是一个快速的backstretch 插件示例：jsfiddle.net/y9zcf/10
width: 400%; // 100% * number of slides 使其非常静态而不是动态
@Si8 - 这可以通过内联样式使用 js 动态定义。答案的 CSS 只是一个例子。

【解决方案3】：

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

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

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>

【讨论】：

【解决方案4】：

您似乎已经定义了要使用的宽度，所以我建议使用最大宽度和 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;

我希望这会有所帮助！

【讨论】：