css三栏布局两边固定中间自适应的五种方式

最新推荐文章于 2024-04-11 00:14:29 发布

十九万里

最新推荐文章于 2024-04-11 00:14:29 发布

阅读量996

点赞数 1

分类专栏： HTML、css、html5、css3 文章标签： css 定位 html flex css3

本文链接：https://blog.csdn.net/weixin_44865458/article/details/117434212

版权

HTML、css、html5、css3 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.浮动
2.定位
3.flex
4.圣杯布局
5.双飞翼布局

1、浮动

第一种就是浮动：左右浮动中间不浮动

    <style>     
  body {
      margin: 0;
      padding: 0;
  }
  .container {
      width: 100%;
      height: 200px;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
      float: left;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
       float: right;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;        
   }

    </style>
</head>
<body>
    <div class="container ">
      <div class="left"></div>  
      <div class="right"></div>  
      <div class="middle">三栏布局</div> 
      
    </div>
    
</body>

2、定位

使用绝对定位左右定位到两边中间的根据具体情况设置left和right

  <style>     
  body {
      margin: 0;
      padding: 0;
  }
  .container {
      width: 100%;
      height: 200px;
      position: relative;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
       position: absolute;
       left:0;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
       position: absolute;
       right: 0;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;
       position: absolute;
       left: 300px;
       right: 300px;     
   }

    </style>
</head>
<body>
    <div class="container ">
      <div class="left"></div>  
      <div class="middle">三栏布局</div> 
      <div class="right"></div>  
      
    </div>

3.flex 布局

设置父元素display为flex 实现三栏布局

<style>
        
  body {
      margin: 0;
      padding: 0;
  }
  .container {
      width: 100%;
      height: 200px;
     display: flex;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;
       flex: 1;
       
   }

    </style>
</head>
<body>
    <div class="container ">
      <div class="left"></div>  
      <div class="middle">三栏布局</div> 
      <div class="right"></div>  
      
    </div>
    
</body>

4.圣杯布局

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-left: -150px;   /* rightContent width */
    right: -150px;
    background: rgb(231, 105, 2);
  }
 
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
 
 
</body>
 
</html>

5、双飞翼布局

双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。
代码更简洁
middle放在最前面
middle的width设置100%，left right 各自设置宽度
left middle right 都设置左浮动
此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%；此时left right 都脱离的文档，被middle挤下去了， margin-left 在父子之间，表示元素左外边距和父左内边距的距离，margin设置负数表示往上一个盒子靠近，
使用middle里面的div设置padding，不需要在使用定位了
同理设置right

 <style>     
  *{
      margin: 0;
      padding: 0;
  }
   .header,
    .footer {
            height: 100px;
            line-height: 100px;
            background-color: green;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }

 .footer {
            background-color: goldenrod;
        }
  .container {
      height: 200px;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
       float: left;
       margin-left:-100%;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
       float: left;
      margin-left: -300px;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;  
       width: 100%;      
       float: left;
   }
   .inner {
            margin: 0 220px 0 200px;
            min-height: 130px;
            background: blue;
            word-break: break-all;
        }

    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <div class="inner">
                <h4>middle</h4>
                <p>
                    中间的盒子
                </p>
            </div>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>
               左边的盒子
            </p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>
                右边的盒子
            </p>
        </div>
    </div>
    <div class="footer">footer</div>
    
</body>

十九万里

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
css三栏布局两边固定中间自适应的五种方式

1.浮动2.定位3.flex4.圣杯布局5.双飞翼布局1、浮动第一种就是浮动：左右浮动中间不浮动 <style> body { margin: 0; padding: 0; } .container { width: 100%; height: 200px; } .left { width: 300px; height: 200px; backgro.
复制链接

扫一扫