css控制table表格宽度的小技巧教程(3)_H5之家 - 中国HTML5教程资源分享第一站

一般我们使用float 浮动属性(float:left(局左)、float:right(居右))来解决此问题。这样的布局一般总的宽度一定，只需左、右内容DIV宽度设置小于总宽度即可实现，注意的是宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成。

提示：在DIV CSS制作中很多时候需要计算的如这样的布局。

实例图：

实现以上效果，提示总宽度为200px,而左右布局都有边框并中间间隔一定距离，这里为了样式所以距离设置比较大。

CSS代码：

代码如下复制代码

.div-c{width:200px;}
.div-a{ float:left; width:50px; border:1px solid #999; height:60px;}
.div-b{ float:right; width:120px; border:1px solid #999; height:60px;}

Html代码：

代码如下复制代码

完整DIV+CSS代码：

代码如下复制代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIVCSS5案例</title>
<style type="text/css">
.div-c{width:200px;}
.div-a{ float:left; width:50px; border:1px solid #999; height:60px;}
.div-b{ float:right; width:120px; border:1px solid #999; height:60px;}
</style>
</head>
<body>
<div class="div-c">
<div class="div-a"></div>
<div class="div-b"></div>
</div>
</body>
</html>

说明：

1、实现设置总宽度为200px的(div-c)，左右DIV使用了float:left左浮动(局左)和float:right右浮动(局右)，分别设置边框和宽度

2、这里设置左右DIV块(即div-a和div-b)总宽度+边框小于总宽度(即div-c对象宽度)

五、总结

设置DIV之间距离无论对象之间有一定距离还是没有距离，我们都需要CSS初始化，并且有距离地方还需要计算宽度，遵循这条死定律设置宽度之和+边框(border)+margin+padding小于等于总宽度，不然会造成左右结构布局错位、其他比较的错误或有差异。