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

最新推荐文章于 2025-06-13 14:39:59 发布

YuZongTao

最新推荐文章于 2025-06-13 14:39:59 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp

本文链接：https://blog.csdn.net/yuzongtao/article/details/40681635

jsp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何让表格自动适应浏览器大小，通过设置table-layout:fixed和百分比宽度实现。同时讲解了DIV浮动设计，包括float属性的使用以及在IE和Firefox中的兼容性处理，提供了一个DIV浮动案例，展示如何让两个DIV在一行中靠左和靠右显示。还提到了span元素的Display:Block属性来实现内容居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

之前写了个页面，将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 : 　对象浮在右边

CSS div float IE和FireFox的兼容性问题

    在IE中，只有指定该DIV的CLASS为FLOAT:left 才会有FLOAT属性

    而在FF中，第一个指定后其后的div也随着平移，所以可以在同级的float加上

    .clear{ clear:both;} <div class="clear"></div>,

    CSS中 height: 19px !important; height: 21px; 在IE是不认important的，如果属性重复，默认截取最后一个。而在FF中important是优先执行的。

    div 设置 margin-left, margin-right 为 auto 时 IE 不会居中，但FF可以.

下面是一个随浏览器自适应大小的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”，称为“行内”元素。

块级元素：

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

行内元素：

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