像table一样布局div

2024-08-25 13:04:04

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧

许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用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的结构，是不是很相似

下来是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经过测试均可以完美显示.

至此整个任务就结束了。

像table一样布局div

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示.但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实
用倒置滤镜把div倒置，再把table倒置。

<div style="border: 1px solid #ff0000; overflow-x:auto; width: 500px;filter:flipv;"> <p> </p> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" st
element中el-container容器与div布局区分详解

用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-aside:侧边栏容器. el-main:主要区域容器. el-footer:底栏容器. 以上组件采用了 flex 布局,elemen-ui官方文档链接: http://element-cn.eleme.io/#/zh-CN/component/container 此外,el-container 的子元
div+css与xhtml+css分别是什么意思?

不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难道就是传说中的标准重构吗?标准从最简单的根源来说不是合理使用xhtml的标签吗?可为什么还是有这么多div+css呢?既然可以div+css,那为什么不可以叫span+css ul+css li+css等等呢? 疑问,满脑子的疑问!为了这个疑问,我把自己脑子里的东西从最底层翻了一遍. 在几年前大家都是用table来布局,一层套一层,没发现什么不妥,一直用到<网站重构>这本书出来后的不久开始看到很多人讨论重构
Bootstrap实现的经典栅格布局效果实例【附demo源码】

本文实例讲述了Bootstrap实现的经典栅格布局效果.分享给大家供大家参考,具体如下: 先来看看效果图: 具体代码如下(某管理系统的Bootstrap实现): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:
重构、标准、布局

近来大家总是在标准上争论不休,其实,这些问题一些相关文章已经说得很明白了. 以下我就谈谈我的看法.本帖子有太多的"我认为",说明了我只是想把我的想法拿出来跟大家商榷,或许有太多不对的地方,也请大家一一指出. 1.我对web标准的理解所谓的web标准,在一些教程文章上已经得到结论:结构化标准(XHTML.XML).表现标准(CSS.XSLT?).行为标准(DOM.ECMAScript).这些东西在网上一搜一大把,在这里我就不多说了.我只说我自己的想法: a.标准是相对的,有其一定的局限
Vue查询数据并通过bootstarp table渲染数据

需求把页面进行改造把apptoken,appkey列隐藏,并且更改该列为企业秘钥,列下显示查看公司秘钥如图: 点击按钮显示当前的企业秘钥: 1.需求分析和步骤: 1.首先改造JS代码: 首先把数据要渲染的visible设置为true需要的设置false, 主要的formatter: actionFormatter这个用于:格式化输出函数及其他 //操作栏的格式化 function actionFormatter(value, row, index) { console.log("列"
JS实现table表格固定表头且表头随横向滚动而滚动

先看一张效果图思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5.滚动的零界点的距离表格的高度+表格距离页面顶部的距离如果滚动超过这个就让头部的top值归0或原封不动当然还有很多可以优化的地方我只是展示一个小思路嘿嘿嘿题外话为啥用红色表头因为显眼哇哈哈 JS代码
jquery实现的鼠标拖动排序Li或Table

1.前端页面复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
Bootstrap Table使用整理(一)

相关阅读: Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/ar

像table一样布局div

相关推荐

随机推荐