1 首先利用浮动
给左边设置宽度，高度，浮动为left
右边不写宽度，给高度，给margin-left设置左边容器的宽度，撑开
因为div属于块级元素会自动占满一行
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .left { width: 200px; height: 100px; background: blueviolet; } .right { background: goldenrod; height: 100px; } .l { float: left; } .r {} </style> </head> <body> <div> <div class="left l">固定200px</div> <div class="right r">自动充满</div> </div> </body> <script> </script> </html>
2 利用定位
父级设置相对定位
左右设置为绝对定位，右边的设置为宽度百分之百，开启怪异盒子，padding-left设置为左边的宽度，
重点左边的设置z-index为1，浮动在右边的上边
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .left { width: 200px; height: 100px; background: blueviolet; } .right { background: goldenrod; height: 100px; } .l { position: absolute; z-index: 1; } .r { position: absolute; right: 0; top: 0; width: 100%; padding-left: 200px; box-sizing: border-box; } </style> </head> <body> <div style="position: relative;"> <div class="left l">固定200px</div> <div class="right r">自动充满</div> </div> </body> <script> </script> </html>
3利用弹性盒子
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .left { width: 200px; height: 100px; background: blueviolet; } .right { background: goldenrod; height: 100px; } .l {} .r { flex: 1; } </style> </head> <body> <div style="display: flex;"> <div class="left l">固定200px</div> <div class="right r">自动充满</div> </div> </body> <script> </script> </html>