Quantcast
Channel: IT社区推荐资讯 - ITIndex.net
Viewing all articles
Browse latest Browse all 11804

表格自动适应浏览器大小及DIV浮动设计(页面自适应浏览器大小)

$
0
0

        一、表格自适应浏览器大小

      之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小。


      解决方法:

      1.一般是给表格整体使用样式: table-layout:fixed

      2.将表格中的各个单元格的 width和height属性值设为比例,而不是给定值。

  

<table style="width:100%">

     <tr>

         <td style="width:20%">skinny cell</td>

         <td style="width:80%">fat cell</td>

      </tr>

  </table>

  注意,表格的大小指定为100%,这将使表格与浏览器窗口等宽。使用百分比而不是像素时,表格将自动调整大小以适应浏览器窗口的大小,同时保持你所追求的美学平衡。在这个例子中,表格中的两个单元格将分别自动调整为表格宽度的20%和80%。


         二、DIV浮动

        要想页面上的DIV随着浏览器大小的改变,始终在自己想要的位置,一般使用float语法:
        float : none | left |right

       参数值:
       none :  对象不浮动
       left :  对象浮在左边
       right :  对象浮在右边

       下面是一个随浏览器自适应大小的DIV浮动案例:

       DIV2 和 DIV3 位于一行,分别在靠左和靠右,实现方法是 将DIV2和DIV3放置在一个大DIV1中,然后分别对DIV2和DIV3使用:float :left 和float :right。

<div id="layer1" style="width:100%; margin:3px; border:5px solid #99CC00; background-color:#99CC00; overflow:hidden;"><Span style="display:block;text-align:center;">我是DIV1</span><div id="sonLayer1" style="width:35%;margin:3px; height:100px; float:left; border:5px solid #999999;  background-color:#999999;"><Span style="display:block;text-align:center;"> 我是DIV2 </span></div><div id="sonLayer2" style="width:40%; margin:3px; height:100px; float:right;border:5px solid #6666FF;   background-color:#6666FF;"><Span style="display:block;text-align:center;">我是DIV3</span></div></div><div id="sonLayer2" style="width:100%;  margin:3px; height:100px;  border:5px solid red;  background-color:yellow;"><Span style="display:block;text-align:center;">我是DIV4</span></div>


    注意:要想在span中将内容居中,需要先使用Display:Block属性,因为“行内”元素span的默认display属性值为“inline”,对行内元素设置高度、宽度、内外边距等属性,都是无效的。


   具体可见: Display:Block 详细用法
      根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如 div元素,它的默认display属性值为“block”,称为 “块级”元素(block-level);而 span元素的默认display属性值为“inline”,称为 “行内”元素

 块级元素:

      占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;

 行内元素:

      自己的独立空间,它是依附于其他块级元素存在的,因此, 对行内元素设置高度、宽度、内外边距等属性,都是无效的
















作者:yuzongtao 发表于2014-11-1 16:29:44 原文链接
阅读:70 评论:0 查看评论

Viewing all articles
Browse latest Browse all 11804

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>