CSS 右边固定宽度，左边流动，右边div在html中排在第一位。我如何避免崩溃

Question

我有一个可变宽度的左侧 div 和一个固定宽度的右侧 div。 花了一段时间才弄清楚如何进行这项工作，因为我正在为 jrox 站点设置主题，而 jrox 不会让我更改列的生成顺序。 HTML:

<div id="jroxHeader" class="jroxHeader"> </div>
<div id="jroxContent">
    <div id="jroxRightColumn" class="jroxRightColumn"> Places to go:
      <ul>
        <li>First Menu</li>
        <li>Second Menu</li>
        <li>Third Menu</li>
      </ul>
    </div>
    <div id="jroxMainContent" class="jroxSingleColumn">  
        Very little content.
    </div>
</div>

CSS:

.jroxSingleColumn{
  float: left;
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
}
.jroxRightColumn{
  float: right;
  width: 160px; 
  margin-left: -160px; 
  background-color:#8E8E8C;
}
.jroxHeader{
   width: 100%;
   background-color:#7A7A78;
   height:150px;
}

正如您在 this fiddle 中看到的那样这看起来不错。它几乎完美地工作。直到我遇到 jroxSingleColumn 中内容很少的页面(如 this fiddle)时，我才注意到并发出问题。 .我需要 jroxSingleColumn 来填充 div 的剩余部分，我需要它是跨浏览器兼容的。我可以更改一些 HTML，但正确的列将始终在 HTML 中。

我几乎可以肯定这不是重复的。我读过很多许多类似的问题，但没有一个是相同的。

谢谢。

Answer 1

从 jroxSingleColumn 类中删除 float:left 即

将你的CSS改成这样:

.jroxSingleColumn{
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
}

看这个fiddle

尽管我想建议，有更简洁的方法来实现您的最终结果。