你對如何定義讓兩個DIV橫向排列的方法是否熟悉，這里和大家分享一下，主要有兩種方法，一種是把display換成inline，另一種就是使用float:right屬性，相信本文介紹一定會讓你有所收獲的。

如何定義讓兩個DIV橫向排列

兩個DIV橫向排列方法一：

一般情況，默認的DIV是寫一個換一行，那么如何定義兩個DIV橫向排列而不換行呢？

DIV默認的display屬性是block。所以每一個DIV都是新的一行，現(xiàn)在把display換成inline就不會換新行了。

< div styledivstyle="background-color:#ff0000;
display:inline;">aaa</div> 
<divstyledivstyle="background-color:#ffff00;
display:inline;">bbb</div> 
 

兩個DIV橫向排列方法二：

這里使用float:right屬性。float做為CSS中的一個屬性定義元素向哪個方向浮動。float:right文本或圖像會移至父元素中的右側。

注意有寫情況float屬性必須配合width使用，否則失效。

<tdclasstdclass="bg10"> 
<divstyledivstyle="width:120px;float:right;">閱讀次數：9999</div> 
<divstyledivstyle="width:200px;float:right;">發(fā)表日期：2009-09-10</div> 
</td> 
 
.bg10{  
background-image:url(../images/news_r6_c4.jpg);  
height:24px;  
line-height:24px;  
color:#939393;  
}  
 

 height:24px;和line-height:24px;高度一致，文字垂直居中。
 

【編輯推薦】

1. DIV CSS表單布局五個小技巧使用秘笈
2. 技術分享 如何實現(xiàn)CSS橫向導航
3. 術語匯編 基本CSS濾鏡概述
4. ***實現(xiàn)豐富的CSS文字效果
5. 鼠標經過時改變DIV背景顏色的三種途徑