css表格布局方式解决你大部分的居中、多列等高、左右布局的问题

就这么简单.Demo3、多行定高|但是多线的就比较复杂了。但是使用table-cell之后，就变得很简单了。当然也可以有多个标签组成的多行，然后进行水平垂直居中demo1demo2。其实实现原理就是利用table-cell。设置成table-cell，然后把里面的元素设置成inline|inline-block（不定宽高|元素居中）或者block（宽度100%|文本居中），就可以控制水平垂直居中了里面的元素。基于这种布局方式，可以固定定高|变高|定宽|变宽|多行|单行的水平和垂直居中。4.左右浮动元素垂直居中。由于display:table-cell对浮动元素不起作用，当我们需要两个元素，一个向左浮动，一个向右浮动，并且两个元素仍然居中。上面的方法是行不通的。然后我们可以改变方法。由于display:table-cell垂直居中；不能直接影响浮动元素，让我们使用间接的。给出一个显示：inline-block；两个浮动元素之外的元素，并清除浮动。然后让display:table-cell的垂直居中作用于行内块元素。demo如果需要给两个浮动元素添加水平和垂直居中，那么同理，只需要在这两个元素中构造一个符合table-cell布局的结构即可。5.经常会有这样的需求，要求一行中多列水平和垂直居中。一列中可能有1个、2个或3个子元素，不管有多少，都必须居中。使用table-cell可以轻松解决。实现原理基本上就是设置外框显示：table-cell；然后将其设置到中心。里面的元素item设置为inline或者line-block；没关系，不管有多少项目，他们都会居中，包括项目的图片。[demo]()6、多列等高布局有这样的需求。一排三个item，三个item的高度是可变的，但是最后这一排三个item的高度是最高的。按照以往的惯例，需求必须被削减，否则价格必须被定高。如果不行就用js计算三个item加载后的高度，然后把最高高度的height设置给其他item。这有点令人讨厌和紧张。有了table-cell，这就不是问题了，因为在一个tr里面，不管里面内容的高度是多少，里面的td必须是一样高的。看一下demo认证的代码，会发现它和我们平时的定高布局不一样。每行外面必须有一个ul来保证里面的item高度一样，需要额外的li来控制里面的间距。这样做的原因是tr里面的元素不会自动换行，所以必须手动换行，在外面加一个ul，（tr呢？）是这样的，元素设置为display:table-cell会跟相邻的兄弟元素一起生成一个虚拟表，tr包裹自己。谁说td只能包裹在一张桌子里。但是你直接写td标签就不会有这样的效果。使用多余的li来控制间距是因为table-cell元素不知道边距，所以只能这样做。生成组织的时候需要判断什么时候换行，而不是像以前那样生成一个ul里所有的li:使用table-cell也可以实现很多布局，需要发挥你的想象力。总结一下，有几点要记住。具有display:table-cell的元素具有以下特征。文本对齐和垂直对齐等对齐属性起作用，但边距不起作用。纵横比值没有影响。将生成一个虚拟表和tr来包装自己。如果有相邻的兄弟元素也设置了table-cell，那么会和兄弟元素一起生成一个虚拟表格，tr会自动换行，显示等高的一行。table-cell元素将占据设置了display:table的元素的宽度。如果一个元素被设置为一个宽度，那么其余的表格单元格元素将占据剩余的宽度。当然，如果只有一个table-cell元素，即使设置了宽度，也会占据table元素的宽度。不适用于具有float和absolute集的元素。而IE6和7不支持这种就是所谓的表格布局方式。display:inline-blockinline-block元素把自己变成一个特殊的行内元素，对相邻元素显示内联特性，允许有空格。对于内部元素，表现出块元素的特点，可以设置高宽。空格的产生是因为两个标签中存在换行符、制表符或空格（实际上是缩进）。只需要为设置了inline-block属性的父元素设置font-size:0，让labelSpacesinlosewidth