300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > css实现左边div固定宽度 右边div自适应撑满剩下的宽度

css实现左边div固定宽度 右边div自适应撑满剩下的宽度

时间:2023-03-17 10:14:56

相关推荐

css实现左边div固定宽度 右边div自适应撑满剩下的宽度

(1)使用float

<div class="use-float"><div></div><div></div></div>

.use-float>div:first-child{width:100px;float:left;}.use-float>div:last-child{overflow:hidden;}

------------------------------------------------------------------------------------------------------------------------------

(2)使用table

<table class="use-table"><tr><td></td><td></td></tr> </table>

.use-table{border-collapse:collapse;width:100%;}.use-table>tbody>tr>td:first-child{width:100px;}

-----------------------------------------------------------------------------------------------------------------------------

(3)用div模拟table

<div class="use-mock-table"><div></div><div></div></div>

.use-mock-table{display:table;width:100%;}.use-mock-table>div{display:table-cell;}.use-mock-table>div:first-child{width:100px;}

-----------------------------------------------------------------------------------------------------------------------------

(4)使用flex

<div class="use-flex"><div></div><div></div></div>

.use-flex{display:flex;}.use-flex>div:first-child{flex:none;width:100px;}.use-flex>div:last-child{flex:1;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。