1、利用同級divdisplay:inline-block將塊級元素改為行內(nèi)元素，塊級元素（div p）自帶換行，轉(zhuǎn)為行內(nèi)元素(span)后不自動換行；父級強制不換行，超過寬度出滾動條；

image.png

超過寬度自動換行，可用于隱藏 顯示功能，關(guān)鍵點在于white-space: nowrap;的使用

image.png

2、利用position:ausolute絕對定位實現(xiàn)；

image.png

定位相關(guān)介紹可看另一篇http://www.itdecent.cn/p/ab91bde05d5d?v=1667895284436
3、利用彈性盒子布局flex；

image.png

有關(guān)flex詳細介紹可看另一篇css flex布局 http://www.itdecent.cn/p/223f8229753b?v=1667895468803