1. 技术文章
  2. 两栏布局，三栏布局，等高布局，流式布局

两栏布局，三栏布局，等高布局，流式布局

由 北慕城南 提交于 2019-11-29 16:23:08

读前笑一笑：

我前面一女生平胸，然后我问她哪天你晚上自己回家，被劫色怎么办…？
她淡淡的回了句：“我就脱了上衣，然后说，别激动，是自己人”……自己人……己人…人…

两栏布局：

1. float+margin（一侧定宽，一侧自动）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左定宽，右自动 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; }

.m-box .left{float:left; width:200px; background-color:#ccc; }
.m-box .right{margin-left:210px;  background-color:#666;}
</style>
</head>
<body>
<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
</body>
</html>
View Code

2.position+margin（一侧定宽，一侧自动）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左定宽，右自动 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; }

.m-box .left{position: absolute; width:200px; background-color:#ccc; }
.m-box .right{margin-left:210px;  background-color:#666;}
</style>
</head>
<body>
<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
</body>
</html>
View Code

3.float+负margin（一侧定宽，一侧自动）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左定宽，右自动 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.m-box .cont,.m-asider { height: 200px; line-height:200px; text-align:center; }

.m-box { float:left; width: 100%;}
.m-box .cont {margin-left:210px;background-color: #ccc;}
.m-asider {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
</style>
</head>
<body>
<div class="m-box">
    <div class="cont">右</div>
</div>
<div class="m-asider">左</div>
</body>
</html>
View Code

 三栏布局：

1.float+margin（两侧定宽，中间自适应）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左右固定，中间自适应 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px; line-height:200px; text-align:center; }

.left {float:left; width: 200px; background-color: #ccc;}
.right {float:right; width: 200px; background-color: #ccc;}
.center { margin: 0 210px; background-color: #666;}
</style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</body>
</html>
View Code

2.position+margin（两侧定宽，中间自适应）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左右固定，中间自适应 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px; line-height:200px; text-align:center; }

.left {position:absolute; top:0; left:0; width: 200px; background-color: #ccc;}
.right {position:absolute; top:0; right:0;  width: 200px; background-color: #ccc;}
.center { margin: 0 210px; background-color: #666;}
</style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</body>
</html>
View Code

3.float+负margin（两侧定宽，中间自适应）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 三列布局 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.left,.right,.m-box .center { height: 200px; line-height:200px; text-align:center; }

.m-box { float:left; width: 100%;}
.m-box .center {margin:0 210px;background-color: #666;}
.left,.right {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
.right {margin-left: -200px;}
</style>
</head>
<body>
<div class="m-box">
    <div class="center">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</body>
</html>
View Code

4.float+position+margin（两侧自动，中间定宽）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 三列布局 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}

.m-box{ height: 200px; line-height:200px; text-align:center; background-color: #ccc;}
.warp1{float:left; width:50%;_margin-right:-3px;}
.warp2{margin-left:50%; text-align:right; _margin-left:0; _zoom:1;}
.m-box1{ margin-right:100px;}
.m-box2{margin-left:100px;}
.m-box3{ background:red;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;}
</style>
</head>
<body>
<div class="warp1">
    <div class="m-box m-box1">左</div>
</div>
<div class="warp2">
    <div class="m-box m-box2">右</div>
</div>
<div class="m-box m-box3">中</div>
</body>
</html>
View Code

5.position+margin（两侧自动，中间定宽）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.main,.m-center { height: 200px; line-height:200px; text-align:center; }

.m-center { z-index: 2; background-color: #666; width: 500px; margin-left: -250px; position: absolute; top: 0; left: 50%; }
.left, .right { z-index: 1; position: absolute; top: 0; width: 50%; }
.left { left: 0; }
.left .main { margin-right: 250px; background-color: #ccc; }
.right { right: 0; }
.right .main { margin-left: 250px; background-color: #ccc; }
</style>
</head>
<body>
<div class="m-center">中</div>
<div class="left">
    <div class="main">左</div>
</div>
<div class="right">
    <div class="main">右</div>
</div>
</body>
</html>
View Code

等高布局：

1.float+margin+position（两列等高布局） 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列等高布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.clearfix { zoom: 1 }
.clearfix:after { content: ""; display: block; height: 0; line-height: 0; font-size: 0; visibility: hidden; clear: both; }

.wrap { width: 950px; margin: 0 auto; background: #ccc; }
.content { margin-left: 150px; border-left: 1px solid #666; background: #ddd; }
.main { float: left; width: 100%; }
.side { float: left; width: 150px; margin-left: -950px; position: relative; }
</style>
</head>
<body>
<div class="wrap">
    <div class="content clearfix">
        <div class="main">
            中-等高吗？<br />
            中-等高吗？<br />
            中-等高吗？<br />
            中-等高吗？<br />
            中-等高吗？<br />
        </div>
        <div class="side">
            左-等高吗？<br />
        </div>
    </div>
</div>
</body>
</html>
View Code

2.float+position（三列等高布局）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应高布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;}

.fl { float: left; }
.container3 { background:green; overflow: hidden; position: relative; }
.container2 { background:yellow; position: relative; right: 30%; }
.container1 { width: 100%; background:red; position: relative; right: 40%; }
.col1 { width: 26%; position: relative; left: 72%; overflow: hidden; }
.col2 { width: 36%; position: relative; left: 76%; overflow: hidden; }
.col3 { width: 26%; position: relative; left: 80%; overflow: hidden; }
</style>
</head>
<body>
<div class="container3 fl">
    <div class="container2 fl">
        <div class="container1 fl">
            <div class="col1 fl">左<br/>小时候我有一个梦想，长大了我就忘了...</div>
            <div class="col2 fl">中<br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>
            <div class="col3 fl">右<br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>
        </div>
    </div>
</div>
</body>
</html>
View Code

流式布局 

1.float

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>流式布局</title>
<style type="text/css">
html,body,p{margin:0; padding: 0;}
.box { width: 340px; border: 1px #c2c2c2 solid; margin: 0 auto;  overflow: hidden; }
.box .list { float: left; width: 100px; margin: 10px 0 0 10px;  }
p { background-color: gray; margin-bottom: 10px; }
.p1 { height: 100px; }
.p2 { height: 125px; }
.p3 { height: 150px; }
.p4 { height: 200px; }
</style>
</head>
<body>
<div class="box">
   <div class="list">
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p3">3</p>
       <p class="p2">2</p>
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p3">3</p>
       <p class="p2">2</p>
   </div>
   <div class="list">
       <p class="p2">2</p>
       <p class="p4">4</p>
       <p class="p3">3</p>
       <p class="p1">1</p>
       <p class="p2">2</p>
       <p class="p4">4</p>
       <p class="p3">3</p>
       <p class="p1">1</p>
   </div>
   <div class="list">
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p2">2</p>
       <p class="p3">3</p>
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p2">2</p>
       <p class="p3">3</p>
   </div>
</div>
</body>
</html>
View Code

2.position

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>流式布局</title>
<style type="text/css">
html,body,p { margin: 0; padding: 0; }
#box { position: relative; width: 360px; height: 400px; background-color: #f2f2f2; overflow: auto; margin: 0 auto; }

p { position: absolute; top: 0; left: 0; width: 100px; background-color: gray; }
.p1 { height: 100px; }
.p2 { height: 125px; }
.p3 { height: 150px; }
.p4 { height: 200px; }
</style>
</head>
<body>
<div id="box">
    <p class="p3">3</p>
    <p class="p2">2</p>
    <p class="p1">1</p>

    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>

    <p class="p3">3</p>
    <p class="p2">2</p>
    <p class="p1">1</p>

    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>
</div>
<script type="text/javascript">
var oBox = document.getElementById("box");
var aList = oBox.getElementsByTagName("p");
for(var i = 0, len = aList.length; i < len; i += 1)
{
    var iCol = 3,iNum = i%iCol,iMargin = 10;
    aList[i].style.left = (iNum+1)*iMargin+parseInt(aList[0].offsetWidth*iNum, 10)+"px";

    if(i >= iCol){
        aList[i].style.top = aList[i-iCol].offsetHeight+aList[i-iCol].offsetTop+iMargin+"px";
    }
}
</script>
</body>
</html>
View Code

 

标签
position
margin
background
padding
meta
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!