CSS实现三栏布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/angrynouse/article/details/127190238

本文探讨了使用CSS实现三栏布局的多种方法，包括浮动布局、绝对定位、Flexbox布局，以及经典的圣杯布局和双飞翼布局。通过这些技术，可以创建灵活且响应式的页面结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

float

<style>
       .left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: blue;
        }
       .right{
            margin-left: 200px;
            height: 200px;
            background-color: pink;
        }
</style>

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>

绝对定位

<style>
        .father {
             position: relative;
             height: 200px;
         }
            
         .left {
             position:absolute;
             width: 200px;
             height: 100%;
             left: 0;
             background-color: blue;
          }

         .right {
             position:absolute;
             height: 100%;
             left:200px;
             right: 0;
             background-color: red;
         }
</style>

<div class="father">
      <div class="left"></div>
      <div class="right"></div>
</div>

flex布局

    <style>
        .father{
            height: 200px;
            width: 100%;
            display: flex;
        }
        .left{
            width: 200px;
            background-color: blue;
        }
        .right{
            flex: 1;
            background-color: pink;
        }
    </style>

    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>

三栏布局

圣杯布局

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            padding: 0 200px;
            height: 300px;
        }
        .box div{
            float: left;
        }
        .main{
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: blue;
            position: relative;
            left: -200px;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 300px;
            background-color: red;
            position: relative;
            right: -200px;
            margin-left: -200px;
        }
    </style>

    <div class="box">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <style>
        .out{
            width: 80%;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #000;

            display: flex;
        }
        .in{
            display: inline-block;
            height: 500px;
        }
        .in:nth-child(1),.in:nth-child(3){
            /* 1\3 盒子宽度固定*/
            width: 50px;
            background-color: blueviolet;
        }
        .in:nth-child(2){
            flex: 1; /*自适应宽度： 占据剩余空间 */
            background-color: blue;
        }
    </style>
    
    <body>
	    <div class="out">
	        <span class="in">1</span>
	        <span class="in">2</span>
	        <span class="in">3</span>
	    </div>
	</body>

双飞翼布局浮动上层加浮动

    <style>
        .box{
            height: 500px;
            width: 100%;
        }
        .main{
            width: 100%;
            height: 100%;
            float: left;
            background-color: pink;
        }
        .left{
            float: left;
            background-color: blue;
            width: 150px;
            height: 100%;
            margin-left: -100%;
        }
        .right{
            float: left;
            background-color: red;
            width: 150px;
            height: 100%;
            margin-left: -150px;
        }
    </style>

    <div class="box">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>