這是我的目標(biāo)1:3等高內(nèi)容垂直居中
首先我想到是用table－cell去實(shí)現(xiàn)
<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%}
看上面的效果圖廊移，發(fā)現(xiàn)割按，咦两波，真的實(shí)現(xiàn)了要拂，于是我新信誓旦旦的交差了，然而當(dāng)我改變文本后發(fā)現(xiàn)
怎么文字變化之后术奖，為什么內(nèi)容變了＝缸瘛！后來發(fā)現(xiàn)不會(huì)自動(dòng)換行采记，內(nèi)容變長導(dǎo)致寬度變長佣耐，所以擠壓了后面的，所以以上的樣式唧龄，只會(huì)在內(nèi)容不回左右撐開width的時(shí)候才能1:3兼砖，但是我們的內(nèi)容不固定的啊，多彩多樣的啊选侨，所以這里需要加上word-break:break-all或者break-word;都是進(jìn)行強(qiáng)制換行掖鱼，這樣如果遇到英文就over了
上實(shí)例看看
看到下面這個(gè)圖我就懵逼了
發(fā)現(xiàn)第二塊是第一塊的三倍然走，但是第一塊并不是外框的1/4
所以table-cell的原理應(yīng)該就是已內(nèi)容寬度并比例為準(zhǔn)援制，然后填充整個(gè)外部，若能填充完芍瑞，則為外部寬度下的等比例晨仑。
可是有的用戶并不一定會(huì)輸入很多內(nèi)容啊，這樣的話不就懵逼了嗎
所以table－cell等高等比的結(jié)論是建立在內(nèi)容足夠撐開容器為前提的
但是我們在table中可以的啊，所以我在wrapper中加上display:table這樣就變成了真正的table了洪己，然后成功了妥凳，，之后發(fā)現(xiàn)又失敗了答捕，還需要加table-layout:fixed
當(dāng)然我在嘗試之前就使用table－cell逝钥，
為什么1% 4% 會(huì)充滿充滿整個(gè)容器呢；寬度比144:575 但是我換成25% 和75% 就變成這樣了
正式奇怪拱镐，而且當(dāng)鼠標(biāo)移入后發(fā)現(xiàn) 第二塊的文本內(nèi)容是第一塊的3倍,試過各種變化艘款，當(dāng)且只有第一塊width為1%的時(shí)候，才能實(shí)現(xiàn)比例關(guān)系
1%和wrappe加table是剛剛寫例子的時(shí)候想到的沃琅，所以早上工作時(shí)候換了種方法
使用inline去實(shí)現(xiàn)哗咆，會(huì)有空格問題哦～～
