左中右三分栏、左右二分栏有哪几种实现方法

jaksmine 2013-01-22 05:17:58

DIV+CSS布局：左中右三分栏、左右二分栏有哪几种实现方法

...全文

385 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiaofan_sap 2013-01-22

打赏
举报

div+css布局总体上就分三种嘛固定布局（固定宽度像素），流式布局（百分比），还有弹性布局（em）。最好的还是用浮动来实现。无论是三列还是两列。基本结构都是差不多的。



<div id="wrapper">
<div id="header"></div>
<div id="content">
<div  id="mainContent"></div>
<div id="secondaryContent"></div>
</div>
<div id="footer"></div>
</div>
body{
text-align:center;
}
#wrapper{
margin:0 auto;
text-align:left;
width:960px;//em  //百分比  下同
}
#mainContent{
float:right;
width:xxxxpx;
}
#sencondaryContent{
float:left;
width:xxxxpx;
}
#content:alter{
content:".",
display:block,
visibility:hidden;
height:0;
clear:both;
}
#content{
display:inline-block;
}
#content{
display:block
}

手敲的大体就这样

binhook 2013-01-22

打赏
举报

引用 3 楼 showbo 的回复:

frameset啊。。

拜托，你有弄清这是用在哪的布局吗，frameset用来布局，除非你已经做好了充分的准备你的网站页面不在乎搜索引擎

Go 旅城通票 2013-01-22

打赏
举报

frameset啊。。

jaksmine 2013-01-22

打赏
举报

引用 1 楼 datiexiong 的回复:

拷贝粘贴一种 http://blog.csdn.net/trace332/article/details/5389144

除了这种，还有用js来控制： <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>左中右结构</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div class="clearfix"> <div class="left" id="left">左</div> <div class="middle" id="middle">中</div> <div class="right" id="right">右</div> </div> </body> </html> <script type="text/javascript"> $(document).ready(function() { var width = $(window).width()-960; $('.left').css('width', width/2); $('.right').css('width', width/2); }); </script> 还有其他方法吗