CSS三栏布局

最新推荐文章于 2024-10-13 19:30:05 发布

慢慢变亮~

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量285

点赞数

分类专栏： CSS 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_53412458/article/details/122374140

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.弹性布局

<style>
  .main {
    display: flex;
    justify-content: center;
    height: 300px;
  }

  .left {
    width: 200px;
    height: 100%;
    background-color: red;
  }

  .content {
    flex: 1;
    background-color: blue;
  }

  .right {
    width: 200px;
    height: 100%;
    background-color: yellow;

  }

</style>

<body>
  <div class="main">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>
</body>

</html>

2.定位布局

  <style>
  		.main{
  		position:relative;
  		}
        .left {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .content {
            left: 200px;
            right: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
        }
        .right {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
<body>  <div class="main">
	        <div class="left"></div>
	        <div class="content"></div>
	        <div class="right"></div>
	    </div>
</body>

3.浮动布局

<style>
  .left {
    width: 200px;
    height: 100%;
    float:left;
    background-color: red;
  }

  .content {
    flex: 1;
    background-color: blue;
  }

  .right {
    width: 200px;
    height: 100%;
    float:right;
    background-color: yellow;

  }

</style>

<body>
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</body>

</html>