再玩table-cell

picture.png

这是我的目标1:3等高内容垂直居中

首先我想到是用table－cell去实现

<div class="wrapper">
 <div class="child1">323</div>
 <div class="child2">323</div>
</div>

css代码

*{margin:0;padding:0;box-sizing:border-box;}
.wrapper{width:220px;}
.wrapper>div{
display:table-cell;
padding:10px;
background:greenyellow;
vertical-align:middle;
text-align:center;
}
div.child1{width:25%}
div.child2{background:yellowgreen;width:75%}

result.png

看上面的效果图，发现，咦，真的实现了，于是我新信誓旦旦的交差了，然而当我改变文本后发现

result2.png

怎么文字变化之后，为什么内容变了！！后来发现不会自动换行，内容变长导致宽度变长，所以挤压了后面的，所以以上的样式，只会在内容不回左右撑开width的时候才能1:3，但是我们的内容不固定的啊，多彩多样的啊，所以这里需要加上word-break:break-all或者break-word;都是进行强制换行，这样如果遇到英文就over了

result3.png

上实例看看

想要的样式.png 现实.png

看到下面这个图我就懵逼了
发现第二块是第一块的三倍，但是第一块并不是外框的1/4
所以table-cell的原理应该就是已内容宽度并比例为准，然后填充整个外部，若能填充完，则为外部宽度下的等比例。
可是有的用户并不一定会输入很多内容啊，这样的话不就懵逼了吗

所以table－cell等高等比的结论是建立在内容足够撑开容器为前提的

但是我们在table中可以的啊，所以我在wrapper中加上display:table这样就变成了真正的table了，然后成功了，，之后发现又失败了，还需要加table-layout:fixed

result4.png

当然我在尝试之前就使用table－cell，

suprise.png

为什么1% 4% 会充满充满整个容器呢；宽度比144:575 但是我换成25% 和75% 就变成这样了

suprise2.png

正式奇怪，而且当鼠标移入后发现 第二块的文本内容是第一块的3倍,试过各种变化，当且只有第一块width为1%的时候，才能实现比例关系

1%和wrappe加table是刚刚写例子的时候想到的，所以早上工作时候换了种方法
使用inline去实现，会有空格问题哦～～