使子div显示内联100％宽度和父溢出滚动 [英] make child divs display inline with 100% width and parent overflow scroll

问题描述

我一整天都在尝试，似乎无法得到这个工作。
这里是一个小提琴，所以你可以理解我在说什么： http://jsfiddle.net/P2BqP /

我确信它可以在没有Java脚本的情况下完成，但我想这里有些东西我不知道。

所以我想让子div取父母的 min-width 的值，所以我可以水平向左或向右滚动，而不需要父级扩展。
我这样做的原因是因为我想要一个可扩展的轮播，而不必为父元素和子元素设置宽度。无论屏幕大小还是用户最大化窗口大小，我都希望它具有可伸缩性。
这是否使得它成为可能？

解决方案

简化版本，但应该给你一个总体思路：

CSS：

  #container {
 background-color：#CCC; 
最小宽度：50％; 
最大宽度：300％; 
 overflow-x：scroll; 
 white-space：nowrap; 
 display：block; 
} 
 
 #container div {
 border：1px solid＃006; 
 white-space：nowrap; 
 display：inline-block; 
宽度：100％; 
} 
  

http://jsfiddle.net/P2BqP/3/

I've tried all day and can't seem to get this to work. Here is a fiddle so you can understand what I'm talking about: http://jsfiddle.net/P2BqP/

I am sure it can be done with no Java script, but i guess there is something i am missing here.
So I want to make the child divs take the value of the parent's min-width, so I can be able to horizontally scroll left or right, without having the parent expand.
The reason I am doing this is because I want a scalable carousel without having to have a set width for the parent and child elements. I would like it to be scalable no matter the screen size or if user maximizes window size.
Does this make sence?

解决方案

Simplified version, but should get you the general idea:

CSS:

#container {
    background-color:#CCC;
    min-width:50%;
    max-width:300%;
    overflow-x:scroll;
    white-space:nowrap;
    display: block;
}

#container div {
    border: 1px solid #006;
    white-space:nowrap;
    display: inline-block;
    width:100%;
}

http://jsfiddle.net/P2BqP/3/

这篇关于使子div显示内联100％宽度和父溢出滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！