[分享]css两列布局和3列布局

发布于 2024-11-11 19:16:12

CSS布局方案中最常用的是两列布局和三列布局，下面我们来详细介绍一下。 1. 两列布局两列布局最常用的方式是使用float属性来实现，我们将左侧列设置为float:left，右侧列设置为float:r...

CSS布局方案中最常用的是两列布局和三列布局，下面我们来详细介绍一下。

1. 两列布局

两列布局最常用的方式是使用float属性来实现，我们将左侧列设置为float:left，右侧列设置为float:right。此外，我们还需要设置一个父元素的宽度，让两列相互占据父元素的空间。

 <style>
    .left{
      float:left;
      width:30%;
    }
    .right{
      float:right;
      width:70%;
    }
    .container{
      width:80%;
      margin:0 auto;
    }
  </style>
  <body>
    <div class="container">
      <div class="left">
        <p>这是左侧列</p>
      </div>
      <div class="right">
        <p>这是右侧列</p>
      </div>
    </div>
  </body>

2. 三列布局

三列布局需要使用float和clear属性，我们将左侧列设置为float:left，右侧列设置为float:right，中间列不需要设置float属性。而为了避免中间列受到左右列的影响，我们需要使用clear:both将中间列清除浮动。同样，我们需要给父元素设置一个宽度，让三列相互占据父元素的空间。

 <style>
    .left{
      float:left;
      width:20%;
    }
    .right{
      float:right;
      width:20%;
    }
    .middle{
      margin:0 20%;
      /* 不需要设置float */
      /* 使用clear:both清除浮动 */
      clear:both;
    }
    .container{
      width:80%;
      margin:0 auto;
    }
  </style>
  <body>
    <div class="container">
      <div class="left">
        <p>这是左侧列</p>
      </div>
      <div class="middle">
        <p>这是中间列</p>
      </div>
      <div class="right">
        <p>这是右侧列</p>
      </div>
    </div>
  </body>

以上就是两列布局和三列布局的详细介绍，大家可以根据自己的需要选择适合自己的布局方式。

css 教程