1. 爱易网页
  2. HTML教程
  3. 求教各位大大一个div布局解决方案

求教各位大大一个div布局解决方案

日期：2014-05-17　 浏览次数：20710 次

求教各位大大一个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了！

相关资料更多>

  1. frameset中页面自动刷新有关问题，求教
  2. HTML5跨平台一站式应用开发、调试跟部署工具UDE
  3. html块其间换行
  4. 谷歌浏览器中button按钮的边框如何去除
  5. text-shadow 看不到阴影？该如何解决
  6. 学习点滴记要——CSS
  7. html5学习canvas根本使用：div在js前面；localStorage存储根据浏览器在不同的位置；应用程序缓存；placeholder 属性提供一种提示（hint），描述输入域所期待的值
  8. 解决css在jsp加载不下的方法
  9. 背景图追随界面大小而改变