请教csdn.net论坛主界面的分栏css如何写
日期：2014-05-17 浏览次数：20424 次
请问csdn.net论坛主界面的分栏css怎么写
请问csdn.net论坛主界面的分栏css怎么写
主界面的宽度为：width: 100%;（不能设置固定的宽度），右边栏也不能固定宽度，根据显示器的分辨率自动调整。
主要是左边栏 和 右边栏 ，中间还有一个“显示/隐藏”列，以下是我的现在的代码，请大家修正一下，谢谢
#page（整个页面）
{
width: 100%;
background-color: #fff;
margin: 1px auto 0px auto;
/*border: 1px solid #496077;*/
}
#leftcolumn（左边栏）
{
color : #333;
border-left : 1px solid #ccc;
background : #b2c5c4;
min-height : 627px;
width : 200px;
float : left;
}
#rightcolumn（右边栏）
{
float : right;
color : #333;
min-height : 350px;
width : 880px;
display : inline;
padding-bottom : 5px;
}
------解决方案--------------------
这是套的模板吧 你一下子都弄出来啊?>
------解决方案--------------------
常说的三栏布局主要是由#header、中间三栏、#Footer三大部分组成。中间三栏占整个页面的宽度，分为#left、#middle、#right，左右主要放一些导航链接，中间放主要内容。
用绝对定位的方法实现固定宽度的三栏布局并不难，但是如果想让宽度随着显示器分辨率自适应就有点困难了。
基本方法
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
实例代码
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>woaicss.com</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#header {
clear: both;
height: 50px;
background-color: blue;
margin:0px 5px 5px 5px;
padding: 1px;
color:white;
}
#left {
float: left;
width: 150px;
background-color: red;
margin:0px 5px;
}
#right {
float: right;
width: 150px;
background-color: green;
margin:0px 5px;
}
#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
height:300px;
margin:0px 5px;
}
#footer {
clear: both;
background-color: yellow;
margin:5px 5px 0px 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>蜗爱css--www.woaicss.com</h1>
</div>
<div id="left">
#left----woaicss.c
请问csdn.net论坛主界面的分栏css怎么写
主界面的宽度为：width: 100%;（不能设置固定的宽度），右边栏也不能固定宽度，根据显示器的分辨率自动调整。
主要是左边栏 和 右边栏 ，中间还有一个“显示/隐藏”列，以下是我的现在的代码，请大家修正一下，谢谢
#page（整个页面）
{
width: 100%;
background-color: #fff;
margin: 1px auto 0px auto;
/*border: 1px solid #496077;*/
}
#leftcolumn（左边栏）
{
color : #333;
border-left : 1px solid #ccc;
background : #b2c5c4;
min-height : 627px;
width : 200px;
float : left;
}
#rightcolumn（右边栏）
{
float : right;
color : #333;
min-height : 350px;
width : 880px;
display : inline;
padding-bottom : 5px;
}
------解决方案--------------------
这是套的模板吧 你一下子都弄出来啊?>
------解决方案--------------------
常说的三栏布局主要是由#header、中间三栏、#Footer三大部分组成。中间三栏占整个页面的宽度，分为#left、#middle、#right，左右主要放一些导航链接，中间放主要内容。
用绝对定位的方法实现固定宽度的三栏布局并不难，但是如果想让宽度随着显示器分辨率自适应就有点困难了。
基本方法
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
实例代码
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>woaicss.com</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#header {
clear: both;
height: 50px;
background-color: blue;
margin:0px 5px 5px 5px;
padding: 1px;
color:white;
}
#left {
float: left;
width: 150px;
background-color: red;
margin:0px 5px;
}
#right {
float: right;
width: 150px;
background-color: green;
margin:0px 5px;
}
#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
height:300px;
margin:0px 5px;
}
#footer {
clear: both;
background-color: yellow;
margin:5px 5px 0px 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>蜗爱css--www.woaicss.com</h1>
</div>
<div id="left">
#left----woaicss.c
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
