您现在的位置是：网站首页> 编程资料编程资料

CSS固定宽度的三列布局运用实例解析CSS的三列式"圣杯布局"方案完全解析CSS三列布局的多种表现形式学习DIV+CSS网页布局之三列布局纯CSS实现的三列布局网页效果实例CSS三列布局两端固定宽度中间自适应

2021-09-05 1090人已围观

简介 左中右三列式页面布局非常常见,这里我们来看一下CSS固定宽度的三列布局运用实例解析,包括等宽等间距的排列方法:

固定宽度三列布局
这很基础，我们直接看代码便能明白：

XML/HTML Code复制内容到剪贴板
  1. <div id="wrapper">  
  2.  <div id="header">headerdiv>  
  3.  <div id="body" class="cls">  
  4.   <div id="aside">  
  5.    <div class="inner">  
  6.     aside   
  7.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  8.    div>  
  9.   div>  
  10.   <div id="content" class="cls">  
  11.    <div id="main">  
  12.     <div class="inner">  
  13.      main   
  14.      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  15.     div>  
  16.    div>  
  17.    <div id="content-aside">  
  18.     <div class="inner">  
  19.      content-aside   
  20.      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  21.     div>  
  22.    div>      
  23.   div>  
  24.  div>  
  25.  <div id="footer">footerdiv>  
  26. div>  
CSS Code复制内容到剪贴板
  1. #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}   
  2. #body{ width: 980px; margin: 0 auto;}   
  3. #aside{ float: left; width: 240px; background: #ccc;}   
  4. #content{ margin-left: 240px;}   
  5. #main{ float: left; width: 540px; background: pink;}   
  6. #content-aside{  float: left; width: 200px; background: orange; }   
  7. #footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}  

实例：实现三列图片等宽等间距布局
2016623112716267.png (378×278)

每个图片块左浮动,宽30%,左外边距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%

CSS Code复制内容到剪贴板
  1.     
  2.     
  3.     
  4. "utf-8">    
  5. "viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">    
  6. 三列图片等宽布局    
  7.     
  8.     
  9.     
  10.     
  11. src="byd.jpg" />src="byd.jpg" />src="byd.jpg" />    
  12. src=

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网