求一个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>