一.display:table-cell的應(yīng)用
首先是簡單的html：
下面是css代碼：
以下是效果圖：
必須注意的是，左側(cè)div必須設(shè)置超過父元素減去右側(cè)元素的寬度
但是這個方法會產(chǎn)生一個問題，它會使左邊的div高度等于右側(cè)div的高度
二.flex布局
同樣使用上面的htmldai'ma
下面是css代碼
效果圖如下：
可以看到左側(cè)的沒有設(shè)置寬度创淡，但是卻跟右側(cè)的寬度一致，實現(xiàn)了寬度自適應(yīng)
方法三.應(yīng)用float和margin
以下是html代碼南吮，與上面有所不同的是琳彩，書寫代碼的時候，right代碼在前面
以下是css代碼：
效果如下：
如圖部凑，左側(cè)div并沒有設(shè)置width值露乏，但是已經(jīng)實現(xiàn)了自適應(yīng)，撐滿了父元素所剩下的寬度涂邀。
以上就是自己學(xué)習和總結(jié)的所有辦法瘟仿，希望對大家有所幫助。
————————————————
版權(quán)聲明：本文為CSDN博主「weixin_34364979」的原創(chuàng)文章比勉，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議劳较，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_34364979/article/details/79476865
