DIV橫向佈局的幾種方法

1.使用display: inline;將塊級元素轉變爲行內元素：

CSS

.item-test{
    border: 1px solid black;
    padding: 7px;
    cursor: pointer;
    /*display: table-cell;*/
    /*float: left;*/
    width: 12px;
    height:214px;
    display: inline;
}

HTML

<div class="item-test">
    <img style="" src="../Public/images/t1.png">
</div>

缺點：雖然能夠作到橫向佈局，可是不能設置寬度和高度，padding和margin也是沒有用，若是須要border就更加不堪入目：

並且，一旦你在使用了display：inline；的元素內添加塊級元素，display：inline就會失效，變回塊級元素的效果。

2. 使用display: table-cell;模擬table的元素：

這種方法比第一種方法要好不少，能夠調是高度和寬度，padding也能夠用，可是不能用margin（想一想也明白，對td（table-cell就是模擬td）使用margin原本就不行）
 

.item-test{
    border: 1px solid black;
    padding: 7px;
    cursor: pointer;
    /*display: table-cell;*/
    /*float: left;*/
    width: 300px;
    height:214px;
    display: table-cell;
    margin-right: 20px;
}

<div class="item-test">
    <img style="" src="../Public/images/t1.png">
</div>
<div class="item-test">
    <img style="" src="../Public/images/t1.png">
</div>

效果：

缺點：不能使用margin

 

3. 使用float浮動屬性：

.item-test{
    border: 1px solid black;
    padding: 7px;
    cursor: pointer;
    float: left;
    width: 300px;
    height:214px;
    margin-right: 20px;
}

<div class="item-test">
    <img style="" src="../Public/images/t1.png">
</div>
<div class="item-test">
    <img style="" src="../Public/images/t1.png">
</div>

使用浮動就比上面的兩種方法都要好了， 高度和寬度，padding，margin 都能用：

缺點：你給他加個父元素，並輸出父元素的border就會發現，父元素沒有被子元素的高度撐起來：
 

.block-live,.block-review{
   padding: 0;
   border: 1px solid red;
}


<ul class="block-live">
   <div class="item-test">
       <img style="" src="../Public/images/t1.png">
   </div>
   <div class="item-test">
       <img style="" src="../Public/images/t1.png">
   </div>
</ul>

我的知道的解決方法有三個：

1.給父元素也添加浮動屬性，雖然能夠 被子元素的高度撐起來 ，可是對於父元素的同級元素來講，父元素的佈局就會走形，想要保持不走形，就得將全部的同級元素添加浮動屬性。

2.在最後一個元素後面添加一個任意元素,並添加  clear:both;  用於清除浮動：

<ul class="block-live">
   <div class="item-test">
       <img style="" src="../Public/images/t1.png">
   </div>
   <div class="item-test">
       <img style="" src="../Public/images/t1.png">
   </div>
   <div style="clear:both;"></div>
</ul>

3.給父元素添加 overflow: hidden;屬性：

.block-live,.block-review{
   padding: 0;
   border: 1px solid red;
   overflow: hidden;
}

我的認爲，這個是最好的方法了，既能夠被子元素的影響，也不會對該元素原來的佈局產生影響。

配合float一塊兒作DIV的橫行佈局最好。

補充：
今天發現float+overflow的一個缺點：
場景：須要實現下圖這個樣的效果：

開始我是以下實現的：

上面紅框是主要代碼：爲了實現「一段文字的兩邊各有一天水平線的效果」 ，我用了絕對定位 將「第三方登陸」所在div上移13px，有一半移除了他的父元素。而後實現的效果是那面這樣，被移除的一半消失了，我開始懷疑是顯示的優先級，就用z-index來試了下，固然是不行的。

看到overflow:hidden我就醒悟了，被設置了該屬性的元素，它全部溢出的內容都會被隱藏。

最後是，去掉了 overflow:hidden ，在最後添加了一個元素用於清除浮動（即第二種讓浮動的子元素影響父元素的方法）：