css中的div布局之巧用div

新手在頁面布局時往往很依賴div來分割頁面，例如下面這個頁面：

這是乙個聊天的頁面，頁面有頭像，id，聊天內容以及時間。看到這個頁面我的第一思路是用三個div來進行操作。首先乙個大的div，在大的div中分左右兩個子div，然後在左div中新增，右邊的div中新增文字資訊。**如下：

talk body .demo1 .demo1 .left .demo1 .left img .demo1 .right .demo1 .right p .demo1 .right span ·18分鐘前

overflow:hidden

這一句很關鍵，它可以解決float帶來的缺陷，float不僅可以水平浮動，還可以立體浮動，overflow：hidden清除了浮動，保證了格式的正確。但是三個div對於這個頁面來說，沒有必要，可以縮減為兩個div，將左邊的div去掉，樣式表：

.demo2 .demo2 img .demo2 .right .demo2 .right p .demo2 .right span

主體為：

· 18分鐘前

這樣減少了div的使用，還完全實現了功能。

其實我們還可以進一步優化**，再減少乙個div，樣式表為：

.demo3 .demo3 img .demo3 p .demo3 span

主體為：

18分鐘前

這樣就把原來的三個div縮減為乙個div，優化了**。這裡不得不提到這一句：

.demo3 img

margin的值是負的，可以實現移出邊框。

三個**效果都一樣：