1、flex盒模型:左边固定宽度,右边自适应宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex; flex-flow:row; } .stable{ 200px; border:1px solid #ccc; margin:20px; } .change{ flex:1; border:1px solid #ff4400; margin:20px; } </style> </head> <body> <div class="parent"> <div class="stable">stable 固定宽度200px</div> <div class="change">changeable 可变宽度</div> </div> </body> </html>
2、传统模式:左边div向左浮动,右边div使用margin-left把左边div的位置留出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent{ height: 500px; border:1px solid #222; } .stable{ float: left; height: 460px; 200px; border:1px solid #ccc; margin:20px; } .change{ height: 460px; border:1px solid #ff4400; margin:20px 20px 20px 260px; } </style> </head> <body> <div class="parent"> <div class="stable">stable 固定宽度200px</div> <div class="change">changeable 可变宽度</div> </div> </body> </html>
如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!