右边自适应 左右布局_css布局-两列布局

一、实现左边固定，右边自适应

实现思路：

1.先设置左边的宽度，让盒子左浮动；
2.设置右边的盒子，margin-left: 左边盒子的宽度。

html代码：

<!-- 左边固定，右边自适应 -->
  <div class="content">
    <div class="left"></div>
    <div class="right">12</div>
  </div>

css代码：

.left{
      width: 400px;
      height: 400px;
      background-color: blue;
      float: left;
    }
.right{
      margin-left: 400px;
      height: 400px; // 高度可以忽略 这里我用来看效果
      background-color: green;
}

效果图：

效果图

二、实现右边固定，左边自适应

1.使用margin，float实现

实现思路：

1.把右边的盒子放在前面；左边的盒子放在后面
2.设置右边的盒子的宽度，让右边的盒子右浮动
3.此时左边的盒子就布满了整个父盒子，使用margin-left：右边的盒子宽度值

html代码:

 <div class="content">
      <div class="right">右边</div>
      <div class="left"></div>
    </div>

css代码：

.right {
        width: 400px;
        background-color: green;
        float: right;
}

.left {
        background-color: blue;
        margin-right: 400px;
}

效果图：

效果图

2.使用弹性布局，flex实现

实现思路：

1.父盒子设置display:flex;
2.左边的盒子flex:1,
3.右边的盒子右浮动；

html代码：

 <div class="content">
      <div class="left"></div>
      <div class="right">右边</div>
  </div>

css代码：

 .content {
        display: flex;
         }
 .left {
        background-color: blue;
        flex: 1;
        }
 .right {
        width: 400px;
        height: 150px;
        background-color: green;
        float: right;
        }