二個固定定位，用margin 把左邊和右邊都讓出來。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s ...
二個固定定位，用margin 把左邊和右邊都讓出來。 <!DOCTYPE html> <html lang="en"> <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>三列浮動中間寬度自適應</title> <style> *{ margin: 0; padding: 0; } #left{ border :1px solid red; width: 200px; /* height: 200px; */ height: 100%; position: absolute; top :0px; left :0px; } #right{ border :1px solid green; width: 200px; /* height: 200px; */ height: 100%; position: absolute; top :0px; right :0px; } #center{ background-color: #fcc; border:1px solid black; /* height: 200px; */ height: 100%; margin-left:205px; margin-right:205px;
} .box{ height: 500px; border:1px solid green; position: relative;
} </style> </head> <body> <div class="box"> <div id="left"></div> <div id="center"></div> <div id="right"></div>
</div> </body> </html>
