Advertisement

html绝对布局布局三层div水平分布,两边宽度固定,中间宽度自适应

阅读量:
复制代码
 <!DOCTYPE html>

    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
     <title>Document</title>
    
     <style>
    
     #one{
    
         position: absolute;
    
         width: 150px;
    
         height: 80px;
    
         top: 0px;
    
         left: 0px;
    
         background-color: blueviolet;
    
     } 
    
     #tow{
    
         position: absolute;
    
         width: 100%;
    
         height: 80px;
    
         top: 0px;
    
         left:150px;
    
         background-color: cadetblue;
    
     }
    
     #three{
    
         position: absolute;
    
         width: 150px;
    
         height: 80px;
    
         top: 0px;
    
         right:0px;
    
         background-color:coral;
    
     }
    
     </style>
    
 </head>
    
 <body>
    
     <div id="one">
    
     第一个元素中的内容
    
     </div>
    
     <div id="tow">
    
     第二个元素中的内容
    
     </div>
    
     <div id="three">
    
     第三个元素中的内容
    
     </div>
    
 </body>
    
 </html>

全部评论 (0)

还没有任何评论哟~