DIV+CSS布局的一则技巧

我们知道,DIV+CSS的布局模式是现在广泛采用的网页布局方法。默认的,新建DIV标签总是另起一行。这就产生了一个问题,即如何使两个DIV标签并列,这样的布局在实际工作中是比较基本和重要的。假如我们将id分别为side和content的两个DIV块左右排列。

在CSS文件中,假如左边div的css这样写:

Code:
  1. #side{   
  2.     float:left;   
  3.     height:380px;   
  4.     width:250px;
  5. }  

那么右边div的css就可以对应写成这样:

Code:
  1. #content{   
  2.    height:380px;   
  3.     margin-left:250px;   
  4.        
  5. }  

有以下几点是值得注意的:

1、float属性只需定义一处,否则处理不好中间会出现难看的裂口。

2、width和margin-left刚好是相同的数字,保证他们能无缝连接。定义了float属性后,可以把该DIV块理解成悬浮在整个页面之上,我们知道margin-left是指的块状结构外沿距离(其他块状结构)边框/外沿的一个属性。如:#content中的值为250,就是规定了它的外沿距离边框250px。#side的宽度刚好也是250px。这样的安排确实是一种妥当的解决方案。

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值