如何使用CSS的table-cell屬性實現左圖右文的排版

這篇文章主要介紹“如何使用CSS的table-cell屬性實現左圖右文的排版”，在日常操作中，相信很多人在如何使用CSS的table-cell屬性實現左圖右文的排版問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用CSS的table-cell屬性實現左圖右文的排版”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

對要素進行橫向排列的時候，一般都會使用float, display:inline-block等方法。我們使用table-cell也可以簡單的實現，
利用table-cell來制作橫向排列的好處我覺得有三點（呵呵呵，有些牽強）

1.float以及 clear:both都可以省略了；
2.縱向居中也可以了；
3.就算使用border和padding也不會頂出邊框了。
clear:both可以使用display:inline-block替換，display:table-cell最主要的是縱向居中。
還有就是在響應式設計的時候，padding和border不會導致樣式頂出邊框的問題。再也不需要計算寬度和使用box-sizing了。

table-cell制作的橫向排列
首先介紹一下table-cell的基本寫法

例，我們制作一個，一般網站中都會出現的左圖右文的樣式

CSS部分：

CSS Code復制內容到剪貼板

1. .box{width:60%; margin:60px auto 0; padding:20px; background:#f5f5f5;}   

2. .content{display:table-cell; *display:inline-block;}  

               
HTML部分：

XML/HTML Code復制內容到剪貼板

1. <div class="box f9 fix">  

2.     <a href="#prettyGirl" class="l mr10"><img border="0" src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></a>  

3.     <div class="content">  

4.         <p><a href="#prettyGirl">大美女一枚</a> 來自上海</p>  

5.         <p class="mt5">簽名：想找個保鮮盒把你給我的那些感動都裝起來。當你讓我傷心的時候就拿出來回味一下。</p>  

6.         <p class="mt5">微博：坐在辦公室，只聽轟隆隆幾聲巨響，晴天也能打雷嗎？原來街對面的芭莎咖啡廳被炸成了兩截。這定點爆破也太失敗了，也不清下場，把路過的汽車震得灰頭土臉，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍藥太水還是房子質量太好？</p>  

7.     </div>  

8. </div>   

到此，關于“如何使用CSS的table-cell屬性實現左圖右文的排版”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！