利用float实现自适应

奶茶要少糖

于 2022-08-30 16:34:38 发布

阅读量312

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_60677470/article/details/126607220

版权

两列，实现左边定宽，右边自适应

.left {
    float: left;
    width: 300px;
    background-color: blue;
}
.right {
    overflow: auto;
    background-color: red;
}
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>

三列，实现左右定宽中间自适应

*{
  margin: 0;
  padding: 0;
}
.left,.right {
  width: 200px;
  height: 200px;
  background-color: #999;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  /* 中间模块空出左右距离，设置浮动 */
  margin: 0 200px;
  height: 300px;
  background-color: #f00;
}

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