三列浮动中间宽度自适应

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

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

三列浮动中间宽度自适应

二个固定定位,用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
如有疑问请与原作者联系

标签:HTMLPOSTnameIEClassset

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

上一篇:两列右列宽度自适应

下一篇:两列