两栏布局 - 左自填充右固定

最新推荐文章于 2023-06-07 09:24:16 发布

hello_dashen

最新推荐文章于 2023-06-07 09:24:16 发布

阅读量188

点赞数

分类专栏： # 布局文章标签： css css3

本文链接：https://blog.csdn.net/weixin_42235173/article/details/119391669

版权

布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

左侧自动填充整个区域，右侧固定的两栏布局

1.左侧div写在右侧div的前面

<div class="wrap">
  <div class="left">这是左 自填充</div>
  <div class="right">这是右 固定宽度</div>
</div>

用float实现的css：

.left {
  float: left;
  width: calc(100% - 200px);
  background-color: red;
}
.right {
  float: left;
  width: 200px;
  background-color:green;
}

2.右侧div写在左侧div的前面

<div class="wrap">
  <div class="right">这是右 固定宽度</div>
  <div class="left">这是左 自填充</div>
</div>

利用 margin 负边距：

.left {
  float: left;
  width: 200px;
  background-color: red;
  margin-left: -200px;  /* 原来在左侧的div margin-left负边距为自己的宽度 */
 }
 .right {
   float: left;
   width: calc(100% - 200px);
   background-color:green;
   margin-right: 200px; /* 原来在右侧的div margin-right左侧的宽度 */
 }