方法1：display：inline-block
首先得先了解塊級元素（block elements）和行內(nèi)元素（inline elements）以及行內(nèi)塊狀元素（inline-block elements）
塊級元素：塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列，常見的塊級元素有div,p,form,ul等等，更多塊級元素的可以去MDN上查閱https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
行內(nèi)元素：高度和寬度由內(nèi)容決定，自身沒法設定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行內(nèi)元素在html所有元素占大多數(shù)，比如a,span,label,button,img,input......更多行內(nèi)元素還是MDN查閱https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
這里可能有人會產(chǎn)生疑問，“button和img以及input等標簽可以設置寬度和高度也可以設置margin與padding，為什么它確實行內(nèi)元素呢？”其實html元素主要有兩種劃分方式，分別是“塊級元素與行內(nèi)元素”，“替換元素與不可替換元素”。上面介紹了第一種劃分方式，下面介紹一下第二種劃分方式：
替換元素：通俗的理解就是具有width和height屬性的元素。替換元素類似于display:block元素，可以設置高寬與內(nèi)外邊距，主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下為替換元素。更官方的定義https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
不可替換元素：除了替換元素剩下的都是不可替換元素（O(∩_∩)O）
扯了一大堆，我們知道display：inline-block可以讓元素橫向排列，但是這種布局可能會存在一點點小問題，舉栗子：
<style>
div{
display:inline-block; width:200px; height:200px;
}
.div1{
background:green;
}
.div2{
background:red;
}
</style>
<div class = "div1">左邊</div>
<div class = "div2">右邊</div>
這是我們發(fā)現(xiàn)兩個div之間存在一個空隙，這是為什么呢？因為兩個標簽之間存在換行符，瀏覽器會在兩個div之間加一個空格的方式表現(xiàn)這個換行符，這個空格的大小則是font-size/2大小。我們可以設置div2的margin-left:-font-size/2，或者可以設置兩個div的父標簽的font-size:0,還有好多方式，此處只是拋磚引玉，具體細節(jié)可以看一下張鑫旭的這篇博客http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
方法2：float：left/right
float屬性可以讓元素脫離常規(guī)文檔流，沿著容器的左側(cè)或者右側(cè)進行水平排列。
這種方式可以說是用的最多的，但是有個問題，在自適應布局中一般不會固定元素的高寬，會根據(jù)內(nèi)容大小來自動調(diào)整，這是如果子元素都是浮動元素的話就會存在高度塌陷。
舉栗子
<style>
span{
float:left; width:200px; height:200px;
}
.box1{
background:green;
}
.box2{
background:red;
}
</style>
<div>
<span class = "box1">左邊</span>
<span class = "box2">右邊</span>
</div>
先說一點，這里將上一個栗子中的div故意改成了span,其實想表達float可以將元素隱式的轉(zhuǎn)換成block元素（position:absolute/fixed亦可），所以自然就可以設置寬度和高度。
那么盒子水平排列之后存在什么問題呢？沒錯父容器高度塌陷。這時父容器div的高度為0，因為浮動元素會脫離常規(guī)文檔流，它的父容器計算高度時會忽略它。這是我們不想看到的
解決辦法自然就是清除浮動，可以在父div設置overflow:hidden，或者在最后一個子元素后面加一個空標簽，然后設置其樣式clear:both。更多清除浮動的方法請百度“css清除浮動!!!!!!”
方法3：table布局
這種布局方式其實不常用，因為它存在種種問題。
·渲染速度較慢
·增加html代碼量，不易維護
·標簽的名字不符合html語義化，table本來就是做表格用的，拿來布局甚是不妥
·標簽結(jié)構(gòu)較死，后期修改成本較高
等等，此處不作過多闡述。總之，不要用table布局
方法四：絕對定位
這種方式日常開發(fā)中用的也較多，前面提到float可以讓元素脫離常規(guī)文檔流，這里position:absolute/fixed也具有同樣的效果，處理辦法在float布局中已經(jīng)提到了，這里搬來即可。
這里要說一下position:absolute絕對定位，以它的第一個父級并且是position:absolute/relative/fixed定位的元素為基點進行定位，如果找不到則以根元素為基準進行定位。一般都是采用父元素position:ralative，子元素position:absolute結(jié)合使用。
方法五：css3的彈性布局
html5的新特性，由于其功能太強大，兼容性太差，我現(xiàn)在還沒法駕馭它，所以沒敢獻丑，不過w3cplus有篇文章寫的很好，感興趣可以讀一下http://www.w3cplus.com/css3/using-flexbox-today.html。
彈性布局因為其兼容性所以還沒有得到廣泛的認可，不過我覺得以后它肯定會獨占鰲頭，就跟我看好html的視頻播放器一樣，早晚都會干敗flash，只是時間問題?。?！
以上就是我說知道的實現(xiàn)橫向布局的五種方式，其實每種方式都有很多大學問，我解釋描述了冰山一角，并且沒有過多的考慮瀏覽器的兼容性，不過還是希望對你有所幫助。
如有錯誤，請指正，感謝
標簽：
