跟我学CSS布局篇之两列布局

作者:      点击次数:897次     发布日期:2015-08-03

跟我学CSS布局篇之两列布局

之前文章:

跟我学CSS布局篇之一列布局

两列布局是网页布局中最常用的一个布局方法,而两列布局最常用的就是居中布局。而实现两列布局最重要的知识点就是:浮动float+盒模型

(width+padding+margin+border)等内容
盒模型的一些知识:你可以参考:http://www.divcss8.com/csskan.aspx?NewsID=152
浮动float:只要父元素能容纳,通过这个属性可以让原本换行显示的块元素可以同行显示。这样我们就可以进行布局上的控制了。可以取的值

有LEFT浮动左,right浮动右。
我们先看第一种情况:
两列固定宽度左侧窄,右侧宽。让里面两个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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟我学CSS布局篇之两列布局-www.divcss8.com</title>
<meta name="keywords" content="跟我学CSS布局篇之两列布局" />
<meta name="description" content="www.divcss8.com跟我学CSS布局篇之两列布局" />
<style type="text/css">
*{padding:0px;margin:0;}
#layout{
width:970px;
margin:0px auto;
}
#layout .left{width:200px;float:left;height:600px;border:1px solid #f00;background:#ccc;margin-right:10px;}
#layout .right{width:756px;float:left;border:1px solid #0f0;height:600px;background:#00f;}
</style>
</head>

<body>
<div id="layout">
 <div class="left">两列布局</div>
<div class="right">两列布局主要内容区域</div>
</div>
</body>
</html>
总结:我们外侧DIV宽度是970像素,里面两列宽度左侧是200像素+右侧宽度756像素。再加右边距10像素。最后又加了边框左右各为1。
我们看第二种情况:
其实如果我们想实现两列固定宽度右侧窄,左侧宽,其实这种同上边例 子基本一样。我们简单变一下就可以了。这也是CSS布局的优点。

<!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>跟我学CSS布局篇之两列布局-www.divcss8.com</title>
<meta name="keywords" content="跟我学CSS布局篇之两列布局" />
<meta name="description" content="www.divcss8.com跟我学CSS布局篇之两列布局" />
<style type="text/css">
*{padding:0px;margin:0;}
#layout{
width:970px;
margin:0px auto;
}
#layout .left{width:200px;float:right;height:600px;border:1px solid #f00;background:#ccc;margin-left:10px;}
#layout .right{width:756px;float:left;border:1px solid #0f0;height:600px;background:#00f;}
</style>
</head>

<body>
<div id="layout">
 <div class="left">两列布局</div>
<div class="right">两列布局主要内容区域</div>
</div>
</body>
</html>
总结:我们只需要改变.left这个DIV的浮动方式即可。当然这个CLASS名为LEFT并不专业。你可以采用siderbar,container等class命名,你也可以参考这篇文章:

http://www.divcss8.com/csskan.aspx?NewsID=202

 

分享DIVCSS8