IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

多列等高方案

记事本 2010-07-27 23:30:57 累计浏览 1,431 次
本机暂存
标签 CSS Flexbox Grid

以下是代码片段：

<!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>

同分类推荐文章

  1. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
  2. 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）
  3. 各公司对前端开发的职位描述 （累计阅读 10,405）
  4. iframe大小自适应 （累计阅读 10,057）
  5. 浏览器的渲染原理简介 （累计阅读 8,377）
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug （累计阅读 8,357）
  7. 程序员眼里IE浏览器是什么样的 （累计阅读 8,011）
  8. 2010网页设计趋势 （累计阅读 7,818）
  9. Web前端工程师编程能力飞升之路 （累计阅读 7,691）
  10. 颜色的代码表达式 （累计阅读 7,665）