三列布局

最新推荐文章于 2024-02-05 14:39:35 发布

kieyooo

最新推荐文章于 2024-02-05 14:39:35 发布

阅读量95

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43655631/article/details/99661377

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    三列布局 
两边固定中间自适应 
  flex布局<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box{
        width:100%;
        height:100px;
        display:flex;
      }
      #left,#right{
        width:200px;
        height:100px;
        background-color:#999;
      }
      #center{
        flex:1;
        height:100px;
        background-color:#f00;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="left">left</div>
      <div id="center">center</div>
      <div id="right">right</div>
    </div>
  </body>
</html>
 
利用浮动（float）<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="UTF-8">  
  <title></title>  
  <style type="text/css">
    .left,.right{
      width:200px;
      height:200px;
      background-color:#999;
    }
    .left{
      float:left;
    }
    .right{
      float:right;
    }
    .center{
      margin:0 200px;
      height:300px;
      background-color:#f00;
    }
  </style>  
</head>  
    <body>  
        <!--该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是            	
            和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。
            当浏览器窗口很小的时候，右边元素会被击倒下一行。-->
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div> 
    </body>  
</html>
 
利用绝对定位 <!DOCTYPE html>
 <html lang="en">
 <head>
     <style>
         *{
             padding:0px;
             margin:0px;
         }
         .main {
             height: 200px;
             margin: 0px 200px;
             background-color: green;
         }
         .left {
             position: absolute;
             width: 200px;
             height: 200px;
             left: 0;
             top:0;
             background-color: red;
         }
         .right {
             position: absolute;
             width: 200px;
             height: 200px;
             right: 0;
             top:0;
             background-color: blue;
         }
     </style>
 </head>
 <body>
 <div class="container">        
     <div class="left"></div>
     <div class="main"></div>
     <div class="right"></div>
 </div>
 </body>
 </html>
 
对中间的宽度进行calc计算 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
       .container{
         overflow: hidden;
       }
       .left,.right{
         float: left;
         width: 100px;
         background:red;
       }
       .center{
         float: left; 
         width:calc(100% - 200px);
         background:yellow;
       }
     </style>
   </head>
   <body>
       <div class="container">
           <div class="left">left</div>
           <div class="center">center</div>
           <div class="right">right</div>
       </div>
   </body>
 </html>
 
双飞翼布局<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body {min-width: 550px;}
      .col {float: left;}			
      #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
      }			
      #main-wrap {
        margin: 0 190px;/*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/		
      }
      #left{
        margin-left: -100%;
        width: 190px;
        height: 200px;
        background-color: #0000FF;
      }		
      #right {
        margin-left: -190px;
        width: 190px;
        height: 200px;
        background-color: #FF0000;
      }
    </style>
  </head>
  <body>
    <div id="container">
        <div id="main" class="col">
          <div id="main-wrap"> #main </div>
        </div>
        <div id="left" class="col">#left</div>
        <div id="right" class="col">#right</div>
    </div>
  </body>
</html>
 
圣杯布局  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css"> 
      .wrapper {
        padding: 0 100px; 
        overflow:hidden;
      }
      .col {
        position: relative; 
        float: left;
      }
      .main {
        width: 100%;
        height: 200px;
        background:yellow;
      }
      .left,.right {
        width: 100px; 
        height: 200px; 
        background:red;
      }
      .left{
        margin-left: -100%;
        left: -100px;
      }
      .right {
        margin-left: -100px; 
        right: -100px;
      }
      
      </style>
    </head>
    <body>
      <div class="wrapper">
          <div class="col main">main</div>
          <div class="col left">left</div>
          <div class="col right">right</div>
      </div>
    </body>
  </html>
 
 

                

kieyooo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列布局

三列布局两边固定中间自适应flex布局<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width:10...
复制链接

扫一扫

专栏目录