html表格左右布局,csstable布局⼤法，解决你⼤部分居中、多
列等⾼、左右布局的问题...
1、table的⼀些特性与表现形式
虽然table布局因为它的⼀些⾮语义化、布局代码冗余，以及不好维护改版等缺点被赶出了布局界。但是在css不给⼒时期，table布局也曾风靡⼀时，就算现在看来table的⼀些布局的特性也是⾮常给⼒的，⽽幸好css也吸取了table布局⼀些好的特性为⼰⽤。让我们可以使⽤更少、更语义化的标签来模拟table布局，可以跳过table布局的缺点⼜实现我们想要的效果，所以我们⾸先需要了解table的⼀些特性以及对应的css属性。
我们在不居中使⽤到的也就是table、tr、td的⼀些特性，所以我们只需要了解这三个标签的特性就⾜够了。
table标签(display:table)
table可设置宽⾼、margin、border、padding等属性。属性值的单位可以使⽤px，百分⽐值。
table的宽度默认由内容的宽⾼撑开，如果table设置了宽度，宽度默认被它⾥⾯的td平均分，如果给某⼀个td设置宽度，那么table剩余的宽度会被其他的td平均分(有点类似flex布局)
给table设置的⾼度起到的作⽤只是min-height的作⽤，当内容的⾼度⾼于设置的⾼度时，table的⾼度会被撑⾼。
tr标签(display:table-row)
给tr设置⾼度只起到min-height的作⽤，默认会平分table的⾼度。
tr中的td默认⾼度会继承tr的⾼度，若给任⼀td设置了⾼度，其他td的⾼度也同样变⾼。适合多列等⾼布局
设置宽度、margin、都不起作⽤
td标签(display:table-cell)
td默认继承table的⾼度，且平分table的宽度
若table(display:table)不存在，给td设置的宽⾼不能⽤百分⽐只能⽤准确的数值
给td设置vertical-align: middle; td元素⾥⾯(除float、position:absolute)所有的块级、⾮块级元素都会相对于td垂直居中
给td设置text-align: center; td元素⾥⾯所有⾮block元素(除float、position:absolute)都会相对于td⽔平居中，虽然block元素不居中，但其中的⽂字或inline元素会⽔平居中
了解了table的⼀些属性，当我们遇到⼀些⽔平垂直居中的布局时，就会变得so easy了。
2、图⽚定⾼不定⾼⽔平垂直居中
图⽚本⾝就是inline-block元素，那么我们只要给它的⽗级元素加个display:table-cell就好
3、多⾏定⾼不定⾼定宽不定宽⽔平垂直居中
我们平时常见的就是单⾏⽔平垂直居中，其实就是简单的text-align：center; 然后再是line-height:xx 就搞定了。但是多⾏的就相对于复杂点。但是使⽤了table-cell之后，就变得很简单了
4、左右浮动元素垂直居中
由于display:table-cell对浮动元素是不起作⽤的，当我们需要两个元素⼀个左浮动⼀个右浮动，并且这连个元素还居中的时候。上⾯的⽅法就不起作⽤了。那我们可以换个法⼦，既然display:table-cell；的垂直居中不能直接对浮动元素起作⽤，那就来个间接的嘛。给两个浮动的元素外⾯⼀个display:inline-block；的元素，并且清除浮动。然后让display:table-cell的垂直居中对inline-block元素起作⽤就好了。
html怎么让所有内容居中如果你的需求还需要在两个浮动的元素中再添加⽔平垂直居中的话，那么同样的道理，只需要在这两个元素中构造符合table-cell布局的结构就好了。
5、⼀⾏多列⽔平垂直居中
经常会有这样的需求，⼀列⾥⾯可能会有1、2、3个⼦元素，不管⼏个都是要居中的。有了table-cell就可以轻松解决了。
实现原理也基本是把外层box设置为display:table-cell；然后设置居中。⾥⾯的元素item设置成inline或者line-block；就可以了，不管⾥⾯的item的个数多少，都会居中的，包括item是图⽚也会这样。
6、多列等⾼布局
有这样的需求，⼀⾏有三个item，三个item的⾼度不定，但是这⼀⾏的三个item最终的⾼度以最⾼的那个为准。按照以前的做法要不就是砍掉需求，必须定⾼。实在不⾏就是等加载完之后⽤js计算三个item的⾼度，然后把最⾼的⾼度给其他item设置⾼度。这样有点恶⼼，并且会出现抖动。有了table-cell之后，这个就不成问题了，因为在⼀个tr中，⾥⾯的td必须是等⾼的，⽽不管⾥⾯内容的⾼度。
认证看代码你会发现跟我们平时的定⾼布局布局不⼀样，每⾏外⾯必须得有⼀个ul来保证⾥⾯item的等⾼，并且⾥⾯还需要使⽤多余的li来控制间距。这样做的原因是因为tr⾥⾯的元素不会⾃动换⾏，所以
必须⼿动换⾏，给外⾯加个ul，(说好的tr呢？)是这样的，被设置为display:table-cell的元素会跟相邻的兄弟元素共同⽣成⼀个虚拟的table、tr把⾃⼰包起来，谁叫td只能包在table⾥⾯呢。但是你直接写td 标签是不会产⽣这样的效果的。⽽使⽤多余的li来控制间距是因为table-cell元素不认识margin，所以只能这样做了。
7、左边定宽右边⾃适应
8、左边右边定宽中间⾃适应三列布局
总结:
使⽤table-cell还可以实现很多的布局，需要⾃⼰去发挥想象。总结下来也就需要记住⼏点，设置了display:table-cell的元素具有以下特性。
text-align、vertical-align等对齐属性起作⽤，margin不起作⽤。宽⾼百分⽐值不起作⽤。
会⽣成虚拟的table、tr把⾃⼰包裹住，如果有相邻的兄弟元素也被设置了table-cell，则会跟兄弟元素⼀起⽣成虚拟的table、tr把⾃⼰包裹住，并⼀⾏等⾼显⽰
多个table-cell元素会占满被设置了display: table的元素的宽度，如果⼀个元素被设置了宽度，那么其
他剩余的table-cell元素会占满剩下的宽度。当然，如果只有⼀个table-cell元素，就算设置了宽度也会占满table元素的宽度。
对设置了float、absolute的元素不起作⽤。且IE6、7不⽀持
这就是所谓的table布局⼤法。
display: inline-block
inline-block元素把⾃⼰变成特殊的inline元素，对于相邻的元素来说表现出inline的特点，允许空格。对于内部元素来说表现出block元素的特点，可以设置⾼度和宽度。
空格是两个标签中存在换⾏符or制表符or空格符(其实就是缩进)的原因⽣产的，只需要给设置了inline-block属性的⽗元素设置font-size:0，就可以使标签中的空格失去宽度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。