div布局的思路
日期：2014-05-17 浏览次数：20558 次
求一个div布局的思路？
左边三行，右边一行。。形状像三行两列，第二列跨三行。
左右相加等于外面容器的宽度。。。
------解决方案--------------------
左边三行，右边一行。。形状像三行两列，第二列跨三行。
左右相加等于外面容器的宽度。。。
------解决方案--------------------
- HTML code
<style>
.main{
width:99%;
height:auto;
overflow:hidden;
}
.a,.b,.c,.d,.e,.f,.g,.h{
border:1px solid #369;
background:#ABC;
width:80px;
float:left;
}
.a{height:200px;}
.b{height:180px;}
.c{height:160px;}
.d{height:140px;}
.e{height:120px;}
.f{height:100px;}
.g{height:80px;}
.h{height:60px;}
</style>
<div class="main">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
</div>
------解决方案--------------------
- HTML code
<!doctype html>
<html>
<head>
<style>
* {margin:0px;padding:0px;}
#page {width:810px;margin-right:auto;margin-left:auto;margin-top:20px;}
#right {width:400px;height:600px;float:left;border:2px solid red;}
#left {width:400px;height:600px;float:left;border:2px solid blue;}
#r1,#r2,#r3 {width:400px;height:200px;}
#r1 {background:yellow;}
#r2 {background:#ccc;}
#r3 {background:black;}
</style>
</head>
<body>
<div id="page">
<div id="right">
<div id="r1">
</div>
<div id="r2">
</div>
<div id="r3">
</div>
</div>
<div id="left">
</div>
</div>
</body>
</html>
------解决方案--------------------
呵呵，2楼的图案排列倒是挺好看的。
楼主把下列代码单存起来，打开看看。至于是否需要根据你的情况进行改写，自己试试吧
<style>
.theforever_csdn1{
background:#ABC;
width:500px;
height:200px;
float:left;
}
.theforever_csdn2{
position:relative;
top:-400px;
background:#00F;
color:red;
width:290px;
height:600px;
float:left;
}
</style>
<div class="main">
<div class="theforever_csdn1">碧海情天</div>
<div class="theforever_csdn1">碧海情天</div>
<div class="theforever_csdn1">碧海情天</div>
<div class="theforever_csdn2">碧海情天</div>
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
