html - CSS负边距，我做错了什么？

Question

我正在尝试实现 1 列灵活布局/1 列固定布局。 'col-a' 应该是灵活的，占据 100% - 110px，'col-b' 应该固定并右对齐。

我尝试使用负边距，但运气不佳。

<div class="cont">

    <div class="col-a">
    Be flexible 
    </div>

    <div class="col-b">
    Be fixed
    </div>

</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.cont {
background-color: #00f;
padding: 10px;
overflow:hidden;
}

.col-a {
background-color: #0ff;
padding-right: 110px;
margin-right: -110px;
float: left;
}

.col-b {
background-color: #ff0;
width: 110px;
float: left;
}

可以只使用这个标记来完成吗？/*找到答案*/这是解决方案

.cont {
  background-color: #00f;
  overflow:hidden;
  padding: 10px;
}

.col-a {
  width: 100%;
  background-color: #0ff;
  margin-right: -110px;
  float: left;
}

.col-b {
  background-color: #ff0;
  width: 110px;
  float: right;
}

Answer 1

我不会为此使用负边距。

这就是我要设置的方式。

1. 将您的列父容器设置为相对位置。
2. 将 A 列的 padding-right 设置为 110px(为 B 列腾出空间)
3. 将 B 列设置为绝对位于顶部，右侧，固定宽度为 110 像素。

这将使您的 A 列水平扩展 100%，同时在右侧为 B 列留出空间。

这是我上面概述的示例:http://jsfiddle.net/NPn8d/