html - css设置左固定右流体布局

Question

我需要处理 html 和 css 这样的布局：对于 250 像素，左侧宽度是静态的，对于屏幕的其他其余部分（100%-250 像素），右侧是流动的

我尝试这样做（我正在使用 sass）：

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

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

Answer 1

这很简单：http: //jsfiddle.net/joplomacedo/ExHzk/ 如果你看不到小提琴，这里是 html 和 css。

HTML：

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

CSS：

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

.fluid {
    margin-left: 250px;
}

除此之外
，我省略了包装。它与演示并不真正相关。但是有一个问题：如果您给包装器的宽度为 100%，那么 margin: 0 auto 是多少？你真的需要指定宽度吗？

Answer 2

如果我理解良好，请尝试此代码：

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

Answer 3

您可以删除float:right.right 上的 .right ，例如：

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

http://jsfiddle.net/RfHqX/

请注意，我没有使用 SASS 样式。

Answer 4

margin不用于float_right div

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

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

演示