首页 > > 网页制作 > css >

三列浮动中间宽度自适应

2020-01-13 16:00:50来源：博客园阅读 ()

三列浮动中间宽度自适应

二个固定定位，用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>

原文链接:https://www.cnblogs.com/dabaixiong/p/12187322.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有