页面常用布局

最新推荐文章于 2020-03-19 21:08:12 发布

weixin_33750452

最新推荐文章于 2020-03-19 21:08:12 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/liu-liang/archive/2013/05/10/3071039.html

版权

1.固定三列

<!DOCTYPE html>
<html>
   <head>
      <title>固定三列</title>
      <style type="text/css">
         body{
            margin-left:auto;
            margin-right:auto;
            width:900px;
         }
         .left{
            width: 200px;
            background-color: red;
            height: 500px;
            float: left;
         }
         .center{
            width: 500px;
            background-color: blue;
            height: 500px;
            float: left;
         }
         .right{
            width:200px;
            background-color: green;
            height: 500px;
            float: left;
         }
      </style>
   </head>
   <body>
      <div class='left'></div>
      <div class='center'></div>
      <div class='right'></div>
   </body>
</html>

2.三列，定高,左右定宽,中间自适应

<!DOCTYPE html>
<html>
   <head>
      <title>定高,左右定宽,中间自动</title>
      <style type="text/css">
         .left{
            width: 200px;
            background-color: red;
            float: left;
            height: 500px;
         }
         .center{
            background-color: blue;
            margin-left: 200px;
            height: 500px;
            margin-right: 200px;
         }
         .right{
            width: 200px;
            background-color: green;
            float: right;
            margin-top: -500px;
            height: 500px;
         }
      </style>
   </head>
   <body>
      <div class='left'></div>
      <div class='center'></div>
      <div class='right'></div>
   </body>
</html>

3.三列，不定高,左右定宽,中间自适应

<!DOCTYPE html>
<html>
   <head>
      <title>不定高,左右定宽,中间自适应</title>
      <style type="text/css">
         .left{
            width: 200px;
            background-color: red;
            position: absolute;
            top:0px;
            left:0px;
            height: 500px;
         }
         .center{
            background-color: blue;
            margin-left: 200px;
            height: 500px;
            margin-right: 200px;
         }
         .right{
            width: 200px;
            background-color: green;
            position: absolute;
            right: 0px;
            top:0px;
            height: 300px;
         }
      </style>
   </head>
   <body>
      <div class='left'></div>
      <div class='center'></div>
      <div class='right'></div>
   </body>
</html>

4.两列，左定宽,右自适应

<!DOCTYPE html>
<html>
   <head>
      <title>左定宽,右自适应</title>
      <style type="text/css">
         .left{
            width: 200px;
            background-color: red;
            height: 500px;
            float:left;
         }
         .right{
            width:auto;
            background-color: green;
            margin-left:200px;
            height: 500px;
         }
      </style>
   </head>
   <body>
      <div class='left'></div>
      <div class='right'></div>
   </body>
</html>

5.两列，右定宽，左自适应

<!DOCTYPE html>
<html>
   <head>
      <title>右定宽,左自适应</title>
      <style type="text/css">
         .left{
            width: 200px;
            background-color: red;
            height: 500px;
            margin-right: 200px;
            width:auto;
         }
         .right{
            width: 200px;
            background-color: green;
            height: 500px;
            float:right;
         }
      </style>
   </head>
   <body>
      <div class='right'></div>
      <div class='left'></div>
   </body>
</html>

欢迎各位看官贴出更好的布局类型和方法！

转载于:https://www.cnblogs.com/liu-liang/archive/2013/05/10/3071039.html

weixin_33750452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面常用布局

1.固定三列<!DOCTYPE html><html> <head> <title>固定三列</title> <style type="text/css"> body{ margin-left:auto; ...
复制链接

扫一扫