1. display:table-cell自適應布局

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

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

2. 美中不足及修復

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

而display:table-cell聲明的作用就是讓元素以td標簽的形式呈現，因此，當他們遇見pre標簽或td標簽的時候就會出問題。。

對于pre標簽

就可以安心回家過年年了

對于td類標簽

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。