求教各位大大一个div布局解决方案
日期：2014-05-17 浏览次数：20773 次
求教各位大大一个div布局
之前求教过大侠们一个布局
用table可实现如上方式布局，而今非常希望用div来实现这种布局
就是不要任何table,纯粹用div组合来实现
自己写了几个最终没写出来，感觉还是有些不知道的css
求教哪位大侠能给我写个，让我学习一下
不得不声明的是，不可以用绝对定位
如果用aobsolute,left,top就不用了，内部的div布局需要使用相对定位
margin-left margin-top float之类的
绝对定位实在太缺乏可复用价值了
真心求教各位大大
------解决方案--------------------
<style type="text/css">
div{border:2px solid #eee;}
div.container{width:280px;height:362px;text-align:center;margin:0 auto;}
div.a{width:72px;height:180px;float:left;}
div.b{width:200px;height:85px;float:left;}
div.c{width:130px;height:91px;float:left;}
div.d{width:66px;height:270px;float:right;}
div.e{width:140px;height:85px;float:left;}
div.f{width:62px;height:85px;float:right;}
div.g{width:62px;height:85px;float:left;}
div.h{width:140px;height:85px;float:right;}
</style>
</head>
<body>
<div class="container">
<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>
</body>
这样就OK了！
之前求教过大侠们一个布局
用table可实现如上方式布局，而今非常希望用div来实现这种布局
就是不要任何table,纯粹用div组合来实现
自己写了几个最终没写出来，感觉还是有些不知道的css
求教哪位大侠能给我写个，让我学习一下
不得不声明的是，不可以用绝对定位
如果用aobsolute,left,top就不用了，内部的div布局需要使用相对定位
margin-left margin-top float之类的
绝对定位实在太缺乏可复用价值了
真心求教各位大大
------解决方案--------------------
<style type="text/css">
div{border:2px solid #eee;}
div.container{width:280px;height:362px;text-align:center;margin:0 auto;}
div.a{width:72px;height:180px;float:left;}
div.b{width:200px;height:85px;float:left;}
div.c{width:130px;height:91px;float:left;}
div.d{width:66px;height:270px;float:right;}
div.e{width:140px;height:85px;float:left;}
div.f{width:62px;height:85px;float:right;}
div.g{width:62px;height:85px;float:left;}
div.h{width:140px;height:85px;float:right;}
</style>
</head>
<body>
<div class="container">
<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>
</body>
这样就OK了！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
