码迷,mamicode.com
首页 > 其他好文 > 详细

div自动撑开(或者自适应)

时间:2014-06-25 11:59:40      阅读:21825      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   ext   color   

  <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现(摘自W3C school)。在编写页面的时候(这里是指jsp),有遇到div标签不能随着内部的内容扩充本身大小的情况,借助div标签的height和overflow属性,可以完美解决问题。

情况一:布局的时候设定了div的宽度和高度,但高度不够:

    <div style="width: 800px;height:150px;background-color: gray;margin: auto">
        <div style="height: 50px;width: 200px;background-color: red;float: none">red</div>
        <div style="height: 40px;width: 250px;background-color: green;float: none;display: block">green</div>
        <div style="float: left;margin-left: 10px;margin-top: 10px">
            <table border="5" bordercolor="greenyellow" style="width: 300px;height: 100px;">
                <tr>
                    <td style="border: 2px solid greenyellow;padding: 0px;" align="center" width="200">
                        aaaaaaaaaaaaaaaaa
                    </td>
                    <td style="border: 2px solid blue;padding: 0px;" align="center">
                        bbbbbb
                    </td>
                </tr>
            </table>
        </div>
    </div>

  实际效果如下(firefox上):

bubuko.com,布布扣

图一

将最外围的div的height设置为auto,就能解决问题:

bubuko.com,布布扣

图二

  overflow属性则是用来控制超出容器边框范围的内容的显示方式,允许的取值有:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

  默认取值是visible,这就是为什么图一中table超出div的部分还是显示出来,但是div本身大小没有改变。如果不想改变div的高度,可以设置overflow为auto,效果如下:

bubuko.com,布布扣

图三

div自动撑开(或者自适应),布布扣,bubuko.com

div自动撑开(或者自适应)

标签:style   class   blog   code   ext   color   

原文地址:http://www.cnblogs.com/lauyu/p/3807195.html

(8)
(3)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!