用div实现像table一样的布局方法

许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
其实有个简单的方法，使用display:table, display:table-row and display:table-cell 就可以实现，而且高度小的容器会自适应那些高度相对较高的，但是IE不支持这个属性，我们先不用去责备IE，相信以后会有所改善的。这里我制作了一个模型。

先看看xhtml的结构：

<div class="equal"> 
    <div class="row"> 
        <div class="one"></div> 
        <div class="two"></div> 
        <div class="three"></div> 
    </div> 
</div>

很简单不用解释就能看懂，但是这里给出一个table的结构，是不是很相似

<table> 
 <tr> 
  <td></td> 
  <td></td> 
  <td></td> 
 </tr> 
</table>

下来是css：

.equal { 
  display:table; 
  border-collapse:separate; 
 } 
 .row { 
  display:table-row; 
 } 
 .row div { 
  display:table-cell; 
 } 
 .row .one { 
  width:200px; 
 } 
 .row .two { 
  width:200px; 
 } 
 .row .three {

}

解释：

1.dispaly:table;让层.equal作为块级元素的表格table显示，也就是将他作为一个表格
2.border-collapse:separate;边框独立，就像表格没有合并单元格以前
3.display:table-row;将.row作为表格行tr显示
4.display:table-cell;将.row的下级div作为表格单元格td显示
5.然后定义宽度

这里还使用了 border-spacing:10px;来区别几个盒子，正如上面所陈述的，IE下不能正常显示，但是在：Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.

赞 (0)

相关推荐

  • 用div实现像table一样的布局方法

    许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示. 但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题. 其实有个简单的方法,使用display:table, display:table-row and display:table-cel

  • Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

    Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

    本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法.分享给大家供大家参考,具体如下: 下拉菜单 菜单: ,dropdown(.dropup改变这个是上显示)   data-toggle="dropdown" (激活文本处)      .dropdown-menu   .pull-left   .pull-right 按钮组:.btn-group(各种类为btn的标签集合)    .btn-toolbar(按钮导航条)  .btn-group-vertical   .

  • JavaScript中无法通过div.style.left获取值的解决方法

    JavaScript中无法通过div.style.left获取值的解决方法

    一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTimeout ( function () { var div = document.getElementById("div4"); //var left = parseInt(div.style.left) + 5; var left = div.offsetLeft + 5; div.sty

  • IE6-IE9不支持table.innerHTML的解决方法分享

    测试代码: 复制代码 代码如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代码在IE6-9中无效,直接报错: IE

  • jQuery简单获取DIV和A标签元素位置的方法

    本文实例讲述了jQuery简单获取DIV和A标签元素位置的方法.分享给大家供大家参考,具体如下: 一.获取DIV的位置 var top = jquery("#div_id").offset().top; //获取div的居上位置 var left = jquery("#div_id").offset().left; //获取div的居左位置 var height = jquery("#div_id").height(); //获取div的高度 v

  • angularjs实现table增加tr的方法

    需求: 上面是一个table,运用了 <tr ng-repeat="rule in formData.ruleList track by $index"> 循环显示.现在的一个需求是:需要在每行添加一个字段,不过不能在同一行显示,需要在下一行显示.我首先想到了直接加个,不过没有办法换行.在下面再加个也不行.只能依赖强大的angulajs,自定义指令.下面我们就开始. 1 自定义指令 .directive( 'kbnTableRow', function($compile)

  • layui的table中显示图片方法

    图片需要用到模板.templet: 注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style <script type="text/javascript"> layui.use('table',function () { var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,

  • layui中table表头样式修改方法

    如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , url: '${ctx}/alarm/queryEventShowScatter' , even: true , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: ['limit', 'count', 'prev', '

  • jquery实现两个div中的元素相互拖动的方法分析

    本文实例讲述了jquery实现两个div中的元素相互拖动的方法.分享给大家供大家参考,具体如下: 这里写了两个实例,两个都是基于jquery实现的.如果有更好的方法,欢迎分享. 第一个效果图: 拖动中: 拖动完成后: 代码实现: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="styles

  • JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    本文实例讲述了JQuery控制div外点击隐藏而div内点击不会隐藏的方法.分享给大家供大家参考.具体如下: 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: 复制代码 代码如下: $("#body").click(function(e) {      $(this).show();          e.stopPropagation();  });  $(document).click(function(event) {   

随机推荐