页面右侧的 HTML 导航栏

Question

我希望页面右侧的导航栏占用 250 像素，主要内容根据窗口大小占用剩余空间。虽然，我希望主要内容在 HTML 中的导航之前出现，所以左侧然后右侧。

我已经实现了左侧导航栏如下：

#left {
    float:left;
    width:250px;    
    background: blue;
}

#right {
    margin-left: 250px;
    background: orange;
}

http://jsfiddle.net/wz355dkr/

如何在不重新排序 HTML 的情况下将其移动到右侧？

Answer 1

    html,
    body,
    div {
      height: 100%;
    }
    #right {
      float: right;
      width: 250px;
      background: blue;
    }
    #left {
      background: orange;
      float: left;
    }

<div id="right">
  hello
</div>
<div id="left">
  Content in the left hand side.
</div>

Answer 2

只需在 css 中将 left 更改为 right：

html,
body,
div {
  height: 100%;
}
#left {
  float: right;
  width: 250px;
  background: blue;
}
#right {
  margin-right: 250px;
  background: orange;
}

<div id="left">
</div>
<div id="right">
</div>