4

私は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

4 に答える 4

13

これは非常に簡単に実行できます。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;
}

さておき
、私はラッパーを省略しました。デモンストレーションにはあまり関係ありません。ただし、1つの質問：ラッパーに100％の幅を与える場合、マージンはどのくらいですか：0 auto？そして、本当に幅を指定する必要がありますか？

于 2012-10-23T13:59:50.010 に答える
-1

float:right次のように.rightを削除できます。

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

http://jsfiddle.net/RfHqX/

SASSスタイルを使用しなかったことに注意してください。

于 2012-10-23T14:00:48.540 に答える
-1

よく理解している場合は、次のコードを試してください。

.wrapper{
    width:100%;
    margin: 0 auto;
    .left{
      width:250px;
      float:left;
    }
    .right{
      float:right;
      width:100%;
      margin-right: 250px;
    }
  }
于 2012-10-23T13:57:44.107 に答える
-1

使用しmarginないfloatright div

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

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

デモ

于 2012-10-23T14:02:25.220 に答える