CSS设置左侧固定和右侧流动布局

Question

我希望进行HTML和CSS相关的布局：

左侧宽度为固定的250像素。

右侧是流体布局，即屏幕剩余部分（100％- 250px）。

我正在尝试使用Sass实现：

  .wrapper{
    width:100%;
    margin: 0 auto;
    .left{
      width:250px;
      float:left;
    }
    .right{
      float:right;
      width:100%;
      margin-left: 250px;
    }
  }

那么我该如何解决这个问题呢？

- brabertaser19

---

你可以使用.left, .right { display: table-cell }来代替浮动。 - cimmanon

Answer 1

这很简单： http://jsfiddle.net/joplomacedo/ExHzk/ 如果你无法看到这个fiddle，这里是HTML和CSS。

HTML:

<div class="fixed"></div>
<div class="fluid"></div>​

CSS：

.fixed {
    float: left;
    width: 250px;
}

.fluid {
    margin-left: 250px;
}

注意事项
我省略了包装器(wrapper)，这对于演示来说并不重要。但有一个问题：如果你给包装器设置了宽度为100%，那么margin: 0 auto是用来干什么的？而且你真的需要指定宽度吗？

- João Paulo Macedo

---

使用width:auto代替margin-left, 这样你就可以在一个地方改变你的margin。 - jwize

Answer 2

如果我理解得正确的话，请尝试这段代码：

.wrapper{
    width:100%;
    margin: 0 auto;
    .left{
      width:250px;
      float:left;
    }
    .right{
      float:right;
      width:100%;
      margin-right: 250px;
    }
  }

- Alessandro Minoccheri

Answer 3

你可以直接移除 .right 上的 float:right，像这样：

right{
  width:100%;
  margin-left: 250px;
}​

http://jsfiddle.net/RfHqX/

注意，我没有使用SASS风格。

- Alex

Answer 4

使用margin而不是float来控制右侧div

.wrapper{
    width:100%;
    margin: 0 auto;
}
    .left{
      width:250px;
  height:100%;
      float:left;
    background:#f00;
    }
    .right{

      height:100%;
      margin-left: 250px;
    background:#0f0;
    }

演示

- GajendraSinghParihar