Css设置左固定和右流体布局

时间:2012-10-23 13:55:35

标签: html css sass

我需要用html和css这样的布局: 左边宽度是250px的静态 对于屏幕的其他部分(100%-250px),右边是流动的

我试试(我正在使用sass):

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

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

4 个答案:

答案 0 :(得分:12)

这很简单: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%,那么保证金是多少:0自动为什么?你真的需要指定宽度吗?

答案 1 :(得分:-1)

如果我理解的话,请尝试使用此代码:

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

答案 2 :(得分:-1)

你可以删除.right上的float:right,如:

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

http://jsfiddle.net/RfHqX/

请注意,我没有使用SASS风格。

答案 3 :(得分:-1)

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;
    }

<强> DEMO