技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 多列等高方案

多列等高方案

浏览:898次  出处信息

以下是代码片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>三列等高</title>
  <style>
   #header
   {
    background-color: gray;
    height: 100px;
    width: 960px;
   }
   #container-1, #container-2, #container-3
   {
    position: relative;
    float: left;
   }
   #container-1
   {
    overflow: hidden;
    width: 960px;
    margin-top: 10px;
    background-color: red;
   }
   #container-2
   {
    background-color: green;
    left: 240px;
   }
   #container-3
   {
    float: left;
    background-color: blue;
    left: 480px;
   }
   #main, #primary, #secondary
   {
    display: inline;
    margin: 0 10px;
    position: relative;
    float: left;
   }
   #main
   {
    width: 460px;
    right: 50%;
   }
   #primary
   {
    width: 220px;
    right: 125%;
   }
   #secondary
   {
    right: 75%;
    width: 220px;
   }
  </style>
 </head>
 <body>
  <div id="header"></div>
  <div id="container-1">
   <div id="container-2">
    <div id="container-3">
     <div id="main">Main<br />Main</div>
     <div id="primary">Primary</div>
     <div id="secondary">Secondary</div>
    </div>
   </div>
  </div>
  <div style="clear: left">
  </div>
 </body>
</html>

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：display: inline-block在IE6、IE7下bug的解决方法
后一篇：终极攻略――未知高度元素垂直居中 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1