一.display:table-cell的應(yīng)用

首先是簡(jiǎn)單的html：

下面是css代碼：

以下是效果圖：

必須注意的是，左側(cè)div必須設(shè)置超過父元素減去右側(cè)元素的寬度

但是這個(gè)方法會(huì)產(chǎn)生一個(gè)問題，它會(huì)使左邊的div高度等于右側(cè)div的高度

二.flex布局

同樣使用上面的htmldai'ma

下面是css代碼

效果圖如下：

可以看到左側(cè)的沒有設(shè)置寬度，但是卻跟右側(cè)的寬度一致，實(shí)現(xiàn)了寬度自適應(yīng)

方法三.應(yīng)用float和margin

以下是html代碼，與上面有所不同的是，書寫代碼的時(shí)候，right代碼在前面

以下是css代碼：

效果如下：

如圖，左側(cè)div并沒有設(shè)置width值，但是已經(jīng)實(shí)現(xiàn)了自適應(yīng)，撐滿了父元素所剩下的寬度。

以上就是自己學(xué)習(xí)和總結(jié)的所有辦法，希望對(duì)大家有所幫助。
————————————————
版權(quán)聲明：本文為CSDN博主「weixin_34364979」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_34364979/article/details/79476865