1. display:table-cell自適應(yīng)布局

典型的雙欄布局類名使用如下：

這種方式實(shí)現(xiàn)的自適應(yīng)布局，元素寬度無需定值，且margin(浮動(dòng)部分)與padding自由設(shè)置，支持百分比寬度（table-cell內(nèi)），且可以無限制嵌套，兼容性不錯(cuò)，在我看來是最佳自適應(yīng)布局方式

2. 美中不足及修復(fù)

人生不如意事八九，display:table-cell自適應(yīng)布局雖然強(qiáng)大，但是，其有個(gè)比較煩人的克星，就是連續(xù)單詞字符換行的問題。例如sbsbsbsbsbsbsbsbsbsb這樣的連續(xù)字符。對(duì)于一般的元素，很好辦的直接

而display:table-cell聲明的作用就是讓元素以td標(biāo)簽的形式呈現(xiàn)，因此，當(dāng)他們遇見pre標(biāo)簽或td標(biāo)簽的時(shí)候就會(huì)出問題。。

對(duì)于pre標(biāo)簽

就可以安心回家過年年了

對(duì)于td類標(biāo)簽

其中width屬性是必須的，但是width值大小您可以根據(jù)實(shí)際情況進(jìn)行設(shè)置。個(gè)人認(rèn)為100%基本上就可以受用于所有情況，無需另作修改

總結(jié)

以上是生活随笔為你收集整理的display:table-cell自适应布局下连续单词字符换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。