css常见三列布局例子代码

一、固定宽度三列布局

 代码如下 复制代码

<div id="wrapper">
 <div id="header">header</div>
 <div id="container" class="cls">
  <div id="aside">
   <div class="inner">
    aside
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </div>
  </div>
  <div id="content" class="cls">
   <div id="main">
    <div class="inner">
     main
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
   </div>
   <div id="content-aside">
    <div class="inner">
     content-aside
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
   </div>   
  </div>
 </div>
 <div id="footer">footer</div>
</div>
#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
#container{ width: 980px; margin: 0 auto;}
#aside{ float: left; width: 240px; background: #ccc;}
#content{ margin-left: 240px;}
#main{ float: left; width: 540px; background: pink;}
#content-aside{  float: left; width: 200px; background: orange; }
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

 

效果如下所示


二、自适应宽度三列布局

 代码如下 复制代码

<div id="wrapper">
 <div id="header">header</div>
 <div id="container" class="cls">
  <div id="aside">
   <div class="inner">
    aside
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </div>
  </div>
  <div id="content" class="cls">
   <div id="main">
    <div class="inner">
     main
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
   </div>
   <div id="content-aside">
    <div class="inner">
     content-aside
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
   </div>   
  </div>
 </div>
 <div id="footer">footer</div>
</div>

#header{ width: 96%; height: 90px; margin: 0 auto; background: #f60;}
#container{ width: 96%; margin: 0 auto;}
#aside{ float: left; width: 240px; background: #ccc;}
#content{ margin-left: 240px;}
#main{ float: left; width: 100%; background: pink;}
#main .inner{ padding-right: 200px;}
#content-aside{ float: left; width: 200px; margin-left: -200px; background: orange; }
#footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}

效果如下

时间： 2024-11-09 03:02:09

css常见三列布局例子代码的相关文章

CSS 三列布局

1.普通三列布局 <!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="

div+css横向三栏布局自适应宽度示例

div+css横向三栏布局自适应宽度示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

css 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=&

用css实现十字的布局示例代码

用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 htt

css+div三栏布局 左右固定宽 中间自适应

三栏布局,这是一种相对比较常见的页面布局,这里提供2种实现方法: 方法1: 使用最新的css3伸缩盒布局属性,可轻松实现(三栏等高,默认就是三栏等高哟!)  代码如下 复制代码 <style>     .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:     #bbb;text-align: center;} .main{} .content{overflow: hidden;

CSS经典三栏布局方案

1. float布局 最简单的三栏布局就是利用float进行布局.首先来绘制左.右栏: <style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } </style> <div class="contain

关于三列布局中间列的居中问题

请看代码 <style type="text/css"> body{ margin:0; padding:0} .left{ width:100px; background:#06F;float:left; height:100px;} .mid{background:#099; height:100px;} .right{ width:100px; background:#F00; float:right;height:100px;} </style> <

用UL实现非Table四行三列布局

先看看效果: 下面是源代码: <html><head><title>test</title><style type="text/css">ul{ margin:0px; padding:0px; width:200px; }ul li{ float:left; list-style-type:none; border-top:#000 solid 1px;                border-left:#000 sol

网页技巧：用UL实现非Table四行三列布局

先看看效果: 效果图 下面是源代码: <html><head><title>test</title><style type="text/css">ul{margin:0px;padding:0px;width:200px;}ul li{float:left;list-style-type:none;border-top:#000 solid 1px; border-left:#000 solid 1px;width:65px;