實(shí)現(xiàn)讓兩個(gè)DIV橫向排列方法揭秘
作者：Mblog
本文向大家描述一下讓兩個(gè)DIV橫向排列的方法，一般情況，默認(rèn)的DIV是寫(xiě)一個(gè)換一行，那么如何定義兩個(gè)DIV橫向排列而不換行呢？請(qǐng)看本文詳細(xì)介紹。
你對(duì)如何定義讓兩個(gè)DIV橫向排列的方法是否熟悉，這里和大家分享一下，主要有兩種方法，一種是把display換成inline，另一種就是使用float:right屬性，相信本文介紹一定會(huì)讓你有所收獲的。
如何定義讓兩個(gè)DIV橫向排列
兩個(gè)DIV橫向排列方法一：
一般情況，默認(rèn)的DIV是寫(xiě)一個(gè)換一行，那么如何定義兩個(gè)DIV橫向排列而不換行呢？
DIV默認(rèn)的display屬性是block。所以每一個(gè)DIV都是新的一行，現(xiàn)在把display換成inline就不會(huì)換新行了。
- <divstyledivstyle="background-color:#ff0000;
- display:inline;">aaa</div>
- <divstyledivstyle="background-color:#ffff00;
- display:inline;">bbb</div>
兩個(gè)DIV橫向排列方法二：
這里使用float:right屬性。float做為CSS中的一個(gè)屬性定義元素向哪個(gè)方向浮動(dòng)。float:right文本或圖像會(huì)移至父元素中的右側(cè)。
注意有寫(xiě)情況float屬性必須配合width使用，否則失效。
- <tdclasstdclass="bg10">
- <divstyledivstyle="width:120px;float:right;">閱讀次數(shù)：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;高度一致，文字垂直居中。
【編輯推薦】
- DIV CSS表單布局五個(gè)小技巧使用秘笈
- 技術(shù)分享 如何實(shí)現(xiàn)CSS橫向?qū)Ш?/a>
- 術(shù)語(yǔ)匯編 基本CSS濾鏡概述
- ***實(shí)現(xiàn)豐富的CSS文字效果
- 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑
責(zé)任編輯：佚名
來(lái)源：
cnblogs.com
