如何讓兩個div並排同行顯示，兩個div同行顯示

如何讓兩個div並排同行顯示，兩個div同行顯示

前段時間在做介面的時候，想要實現個兩個DIV並排的介面，做之前想著挺簡單的，只要將一個div浮動就可以了。然後就測試了一下。下面是部分代碼

自己測試代碼

<span style="font-size:18px;"><body>    <div style="background-color:red;width:200px;">DIV1</div>    <div style="background-color:yellow;width:200px;float:right">DIV2</div></body></span>

效果效果兩個div的寬度相加是小於頁面的寬度的，那麼實驗結果呢？

不成功，後來改成了左浮動，還是不成功。怎麼辦呢？還是上網查。。。

解決方案

不得不說有了網路這個無所不知的老師，對我們的協助太大了。經過查詢得出了兩個解決方案。

第一種

第一種方法還是採用浮動，只是這兩個div要兩個都浮動才行。看來失之毫釐，差之千裡啊！下面來試試效果。

1.都左浮動代碼

<span style="font-size:18px;"><body>    <div style="background-color:red;width:200px;float:right;">DIV1</div>    <div style="background-color:yellow;width:200px;float:right">DIV2</div></body></span>

效果

2.一個左浮動，一個右浮動代碼

<span style="font-size:18px;"><body>    <div style="background-color:red;width:200px;float:left;">DIV1</div>    <div style="background-color:yellow;width:200px;float:right">DIV2</div></body></span>

效果

好了，下面來看看第二紅解決方案

第二種

給兩個div都設定display:inline屬性。

代碼

<span style="font-size:18px;"><body>    <div style="background-color:red;width:200px;display:inline"">DIV1</div>    <div style="background-color:yellow;width:200px;display:inline">DIV2</div></body></span>

效果

好，成功了，但是兩個div的width屬性失效了。具體想要什麼樣式自己調吧。

總結：

在前進的過程中，總是有我們不懂的，不會的。在遇到困難自己解決不了的時候，那麼就可以請教下我們的互連網老師，讓他來幫我們解答。