负边距实现两栏布局：固定+自适应宽度问题求助

先给你把两个版本的布局都修好，先看你原代码的问题出在哪：

• 右侧固定版本：给固定栏加了margin-right:80px还让它左浮动，直接导致容器右侧留白；而且负边距的计算逻辑不对，没对应固定栏的实际宽度。
• 左侧固定版本：固定栏多了margin-left:80px，把自适应栏的位置挤乱了，同时负边距和内容容器的margin设置完全错误。

下面是修复后的完整代码：

CSS 代码 #

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 

div.container {
  clear: both;
  overflow: hidden;
  margin: 20px 0;
}

/* 右侧固定栏版本 */
div.container.right-fixed {
  border: 1px solid red;
}

div.container.right-fixed div.fixed {
  background-color: lightblue;
  float: right; /* 改成右浮动，去掉多余margin */
  padding: 10px;
  width: 160px;
}

div.container.right-fixed div.fluid {
  background-color: lightgreen;
  float: left;
  margin-right: -160px; /* 负边距等于固定栏宽度 */
  padding: 10px;
  width: 100%;
}

div.container.right-fixed div.fluid div.content {
  margin-right: 160px; /* 给内容留出固定栏的宽度空间 */
}

/* 左侧固定栏版本 */
div.container.left-fixed {
  border: 1px solid red;
}

div.container.left-fixed div.fixed {
  background-color: lightblue;
  float: left;
  padding: 10px;
  width: 160px;
  /* 去掉多余的margin-left:80px */
}

div.container.left-fixed div.fluid {
  background-color: lightgreen;
  float: left;
  margin-left: -160px; /* 负边距等于固定栏宽度 */
  padding: 10px;
  width: 100%;
}

div.container.left-fixed div.fluid div.content {
  margin-left: 160px; /* 给内容留出固定栏的宽度空间 */
}

HTML 代码 #

<h1>右侧栏固定宽度</h1>

<div class="container right-fixed">
  <div class="fluid">
    <div class="content">
      自适应栏
    </div>
  </div>
  <div class="fixed">  
     固定栏
  </div>
</div>

<h1>左侧栏固定宽度</h1>

<div class="container left-fixed">
  <div class="fixed">  
     固定栏
  </div>
  <div class="fluid">
    <div class="content">
      自适应栏
    </div>
  </div>
</div>

关键修复点说明 #

1. 右侧固定栏：把固定栏改成float:right，去掉多余的margin-right，负边距和内容容器的margin都对应固定栏的宽度（160px），这样自适应栏会填满剩下的空间，不会留空白。
2. 左侧固定栏：删掉固定栏的margin-left:80px，调整自适应栏的负边距为-160px，内容容器的margin-left设为160px，让自适应栏的内容避开固定栏，同时整体填满容器宽度。

这样两个版本的布局都能正常工作，两栏刚好填满容器100%宽度，没有留白或错位问题。

内容的提问来源于stack exchange，提问作者Miguel Moura