css 两列布局应用例子(兼容ie,ff,360)

一、固定宽度两列布局

1.侧栏在左

 代码如下 复制代码
 <div id="wrapper">
 <div id="header">header</div>
 <div id="container" class="cls">
  <div id="aside">
   <div class="inner">aside</div>
  </div>
  <div id="main">
   <div class="inner">main</div>
  </div>
 </div>
 <div id="footer">footer</div>
</div> 
#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
#container{ width: 980px; height: 500px; margin: 0 auto;}
#aside{ float: left; width: 240px; height: 500px; background: #ccc;}
#main{ float: left; width: 740px; height: 500px; background: orange;}
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

效果

 


2.侧栏在右

 代码如下 复制代码
 <div id="wrapper">
 <div id="header">header</div>
 <div id="container" class="cls">
  <div id="main">
   <div class="inner">main</div>
  </div>
  <div id="aside">
   <div class="inner">aside</div>
  </div>
 </div>
 <div id="footer">footer</div>
</div> 
#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
#container{ width: 980px; height: 500px; margin: 0 auto;}
#main{ float: left; width: 740px; height: 500px; background: orange;}
#aside{ float:left; width: 240px; height: 500px; background: #ccc;}
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

效果

 


二、自适应布局

1.固定左栏右侧自适应

 代码如下 复制代码
<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="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>
 <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;}
#main{ margin-left: 240px; background: orange; }
#footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}

效果

 


2.固定右栏左侧自适应

 代码如下 复制代码

<div id="wrapper">
 <div id="header">header</div>
 <div id="container" 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="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>
 <div id="footer">footer</div>
</div>

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

效果

 

时间： 2024-11-05 20:24:26

css 两列布局应用例子(兼容ie,ff,360)的相关文章

css 左列自适应宽度的一行两列布局

今天想实现一行两列的布局,左列宽度自适应,右列宽度保持不变.HTML的写法是: <div id="main">     <div id="left"><p>左列</p></div>     <div id="right"><p>右列</p></div> </div> 现在加CSS,要实现的效果是mian是可变的,right层宽度

css 两列宽度自适应三种测试例子

两列宽度自适应测试 左侧浮动,右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉,而且有一个 IE6 3px bug Right 测试子元素能否使用width:100% 左侧绝对定位,右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug Right 测试子元素能否使用width:100% 计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug"> 另外还有网上的一种方法,可能不用确定左侧宽度,利用那啥hasLa

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="

CSS多列布局实现方法大全

 摘要: 多列布局在网站应用中也是经常见到的,今天就分享4中多列布局. display:table 代码如下: <style> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { border: 1px solid red; display: table-cell; width: 3

JS 两日期相减,获得天数的小例子(兼容IE,FF)

这篇文章介绍了两日期相减,获得天数的小例子,有需要的朋友可以参考一下   复制代码 代码如下: function GetDay() { var arrDate, objDate1, objDate2, intDays; objDate1 = new Date(); objDate2 = new Date(); arrDate = $("#开始日期").val().split("-"); objDate1.setFullYear(arrDate[0], arrDate

JS 两日期相减,获得天数的小例子(兼容IE,FF)_javascript技巧

复制代码 代码如下:    function GetDay() {    var arrDate, objDate1, objDate2, intDays;     objDate1 = new Date();    objDate2 = new Date();     arrDate = $("#开始日期").val().split("-");    objDate1.setFullYear(arrDate[0], arrDate[1], arrDate[2]);

CSS让DIV水平垂直居中（兼容IE/FF/google浏览器）

实例  代码如下 复制代码 <style type="text/css"> body { margin: 0; padding: 0; background: #1d1d1d; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font: 4em Georgia, "Times New Roman", Times, serif; color: #fff;

SEO参考：DIV+CSS三行两列经典布局

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应. 这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozi

DIV+CSS三行两列经典布局

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在<网页设计师 >上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应.完整代码如下(在原代码的基础上作了一定规范整理):           <html>   <head>   <me