Question

不设置高度如何让div里面的内容不过显示？

设置一个最大div包含三个div，最大的宽度设置100%高度不设置，里面的三个div宽度也是100%高度不设，然后里面的三个div都有一张图片，图片的宽度设置100%；display: block;，最终的目的想让他们随着浏览器的宽度来改变。 为什么最大的div我不设高度图片就看不见了？
代码：
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.zddiv{
width: 100%;
height:auto;
background-color: red;
position: relative;
overflow: hidden;

}
.div1{
width: 100%;
display: block;
position: absolute;
dear:left
}
.div2{
width: 100%;
display: block;
position: absolute;
left: 100%;
top: 0px;
dear:left ;
}
.div3{
width: 100%;
display: block;
position: absolute;
left: 200%;
top: 0px;
dear:left ;
}
.zddiv img{
width: 100%;
display: block;
}
</style>

<div class="zddiv">
<div class="div1"><img src="images/sy1-1024-576.jpg" /></div>
<div class="div2"><img src="images/sy2-1024-576.jpg" /></div>
<div class="div3"><img src="images/sy3-1024-576.jpg" /></div>
</div>

Answer 1

定位问题，你的绝对定位！绝对定位的时候DIV已经被抽出文档流了，形象点说就是你的zddiv里边已经不包含那三个小DIV了。（虽然隶属关系还存在）！dear:left，这个dear是什么，么见过啊！应该是float吧，如果你用了定位那么float就不顶用了

追问

dear:left 什么也不是写错了， 那你说怎么办他们才能显示？

追答

去掉绝对定位，里边的小DIV全部左浮动float:left，去掉zddiv的overflow:hidden，然后加上这个！

.zddiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

追问

你这样子做 底部会出现滚动条的，我只想让一张图片占整个窗口，其余的隐藏掉！！

追答

你是要做瀑布流吧？如果你要非得全屏，这玩意得结合JS来做！如果不是全屏那就给zddiv一个宽度！你果然一点基础都没有啊！zddiv不设宽度铁定出横向滚动条啊！现在瀑布流网上有很多，比如百度图片……你参考下吧。

Answer 2

overflow: hidden;

目测是这个原因
里面的小DIV有position: absolute;，所以外面的zddiv不会被撑开，如果你想要撑开，则不能使用position: absolute;

你应该用float：left

追问

如果不设position: absolute; 就不能切换滑动了。

追答

滑动切换是不需要小DIV浮动的，不是说不能这样做，而是这样做你需要计算每一个小DIV的尺寸。

正确的应该是：
设置overflow: hidden;框架大小

设置小DIV3倍宽度或更长

JS控制中间的DIV移动，可以是position: absolute后用left，也可以是直接用margin-left，我比较倾向用margin

追问

中间那个div宽度我也是设置100%； 然后在通过margin-left：100% 吗？如果是这样也要让下面的两个div跟第一个div并排才好啊，所以也要通过position: absolute才行，要不然直接用margin-left怎么能达到切换效果啊？