3天0基礎(chǔ)建站課程

[Html 交流] 如何讓兩個(gè)div并排同行顯示的的具體步驟

[復(fù)制鏈接]

大師兄

114 主題	10 回帖	1564 積分

超級(jí)版主

Rank: 8 Rank: 8

積分: 1564

發(fā)消息

電梯直達(dá)

樓主

發(fā)表于 2017-10-26 23:57:07 | 只看該作者 |只看大圖回帖獎(jiǎng)勵(lì)

|倒序?yàn)g覽 |閱讀模式

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦！（包涵精彩圖片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒(méi)有賬號(hào)？立即注冊(cè)

前段時(shí)間在做界面的時(shí)候，想要實(shí)現(xiàn)個(gè)兩個(gè)DIV并排的界面，做之前想著挺簡(jiǎn)單的，只要將一個(gè)div浮動(dòng)就可以了。然后就測(cè)試了一下。下面是部分代碼

自己測(cè)試代碼

<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>

復(fù)制代碼

效果效果兩個(gè)div的寬度相加是小于頁(yè)面的寬度的，那么試驗(yàn)結(jié)果呢？

不成功，后來(lái)改成了左浮動(dòng)，還是不成功。怎么辦呢？還是上網(wǎng)查。。。

解決方案

不得不說(shuō)有了網(wǎng)絡(luò)這個(gè)無(wú)所不知的老師，對(duì)我們的幫助太大了。經(jīng)過(guò)查詢得出了兩個(gè)解決方案。

第一種

第一種方法還是采用浮動(dòng)，只是這兩個(gè)div要兩個(gè)都浮動(dòng)才行�？磥�(lái)失之毫厘，差之千里�。∠旅鎭�(lái)試試效果。

1.都左浮動(dòng)代碼

<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>

復(fù)制代碼

2.一個(gè)左浮動(dòng)，一個(gè)右浮動(dòng)代碼

<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>

復(fù)制代碼

效果

好了，下面來(lái)看看第二紅解決方案

第二種

給兩個(gè)div都設(shè)置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>

復(fù)制代碼

效果

好，成功了，但是兩個(gè)div的width屬性失效了。具體想要什么樣式自己調(diào)吧。

總結(jié)：

在前進(jìn)的過(guò)程中，總是有我們不懂的，不會(huì)的。在遇到困難自己解決不了的時(shí)候，那么就可以請(qǐng)教下我們的道勤老師，讓他來(lái)幫我們解答。

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟赓M(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！

本內(nèi)容系道勤團(tuán)隊(duì) bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！