div如何做到自适应......

父级div高度100%,里面有三个子div,上中下排列,三个子div高度都是自适应的,且顺序不固定,求大神指点

图片说明

 <div style="border: 1px solid #ccc;width:100%;float:left;height:30px;s"></div>
<div style="border: 1px solid #bbb;width:100%;float:left;height:30px;"></div>
<div style="border: 1px solid #aaa;width:100%;float:left;height:30px;"></div>

欢迎收藏素文宅博客:blog.yoodb.com

你是说父级怎么自适应吗?要是父级的话添加个类father可以用添加个伪类:after
然后设置.father:after{content:''; display:block; clear:both;}

子div的样式给width:100%;height:33%;

 <div style="height:100%;">
        <div style="width:100%;height:33%;border:1px solid red;">s</div>
        <div style="width:100%;height:33%;border:1px solid red;">s</div>
        <div style="width:100%;height:33%;border:1px solid red;">s</div>


    </div>

如果子div宽度都是100%的话,父div是会被三个子div高度撑开的,如果你子div都是用的float的话,建议给父div清除浮动~

你可以看看bootstrap里面的栅格系统,方便很多

设置 三个div float:left