关于div宽度比例和设置border的问题

net205 2009-10-23 11:19:00

问题是这样的，就是在一个页面或容器区域中，定义几列，然后按百分比显示各列的宽度。
到底定义几列(2列、3列...N列)，各例的百分比都是程序控制，设置好后保存到数据库中的（如：columns = 3, scales = "20%-30%-50%"）
然后我用程序生成n列div，然后设置各div的比例，静态html类似如下，但如果设置div的border，则最后的div会换行，没办法解决：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title></title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style>

	.common {

		float:left;

		 height:100%x; 

		 border:1px dotted #000;

	}

	.area1{

		width:20%;

	}

	.area2{

		width:80%;

	}

	.area3{

		width:20%;

	}

	.area4{

		width:20%;

	}

	.area5{

		width:60%;

	}

  </style>

 </head>



 <body>

  <div id="content1">

	  <div class="common area1">

		1

	  </div>

	  <div class="common area2">

		2

	  </div>

  </div>



  <br /> <br /> <br />

  <div id="content2">

	  <div class="common area3">

		3

	  </div>

	  <div class="common area4">

		4

	  </div>

	  <div class="common area5">

		5

	  </div>

  </div>

 </body>

</html>

网上搜索了一下，有人说去掉页头的：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

有人说在外层定义div，用背景颜色作为边框，再设置padding=1px，overflow=hidden，里面的div按百分比显示

还有人说用表格

这些都是我想要的理想效果，我想听听更好的解决办法？？？？？？？？？？？？？？

...全文

697 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

toury 2009-10-24

打赏
举报

看看你上个帖子，我在那里写了一段代码，不知道是不是你要的效果。
当然，没仔细做，你自己还要加工一下

swandragon 2009-10-24

打赏
举报

[Quote=引用 1 楼 cs5276 的回复:]
首先要清除边界：
* {padding:0px;margin:0px;}

如果还不行就把三块DIV之和定义为99.9%

或者定义两块DIV的宽度为固定数值，比如20%，然后第三块定义为auto，并加{overflow:hidden;}
[/Quote]

如果还不行就把三块DIV之和定义为99.9%