css网页左右排列二列布局的例子

发布时间:2020-06-16编辑:脚本学堂
如何用css实现网页左右排列,css控制网页二列布局的例子,类似于用css来画一个矩形而已,设置好边框颜色与宽度,感兴趣的朋友参考下。

css实现网页左右排列二列布局
 
在内容页左上角放置了300*250的广告,使用css的浮动<div style=”float:left;margin-right:15px;”>,由于css的特性,这样设置后,当文章的高度超过了250像素时,文章自动移动到广告的下面去了,而不是左右两列分开,如何左右分开呢?

给这个div加个纵向的高度<div style=”float:left;margin-right:15px;height:300px”>这个高度值设为多少,根据网页的需要自己调整。

其实,这个类似于用css来画一个矩形而已,需要设置边框颜色和宽度的。

例子:
画矩形:
 

<div style=”width:300px;height:150px;border:1px solid #000″></div>

画垂直线(以上例 放中间):
 

<div style=”width:300px;height:150px;border:1px solid #000″><div style=”width:150px;height:150px;border-right:1px solid #000″></div></div>