CSS（固定宽度右，流体左，左是第一个在 html 中） 如何防止左 div 折叠？

Question

我有一个流体宽度的左 div 和一个固定宽度的右 div。花了一段时间才弄清楚如何完成这项工作，因为我正在为一个 jrox 站点设置主题，而 jrox 不允许我更改列的生成顺序。 HTML：

<div id="jroxHeader" class="jroxHeader"> </div>
<div id="jroxContent">
  <div id="jroxMainContent" class="jroxSingleColumn">  
    Very little content.
  </div>
  <div id="jroxRightColumn" class="jroxRightColumn"> Places to go:
    <ul>
      <li>First Menu</li>
      <li>Second Menu</li>
      <li>Third Menu</li>
    </ul>
  </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，但左列 (jroxSingleColumn) 将始终在 HTML 中优先。

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

谢谢。

-- 注意：-----

前几天我问了同样的问题，但我的 HTML 代码有误。我查看了整个 stackoverflow.com 以找到解决错误的正确方法，但我没有发现在这种情况下该怎么做。我相信我做了正确的事情，接受了对我错误提问的问题的正确答案，并用正确的措辞重新提问。不正确的问题是here。该修复无法以正确的顺序处理 HTML。

Answer 1

这是一个混合使用relative 和absolute 定位的变体。虽然我喜欢显示表格和表格单元格选项。

删除浮动，将position: relative; 应用到#jroxContent 和position: absolute; 到.jroxRightColumn。之后，只需使用top: 0; right: 0; 将.jroxRightColumn 移动到右上角。

http://jsfiddle.net/ZVP6A/28/

CSS

#jroxContent{
     width: 100%;
     position: relative;
}
.jroxSingleColumn{
     margin-right: 160px;
     padding:0 10px;
     width:auto;
     background-color:#B6B6B4;
}
.jroxRightColumn{
     position: absolute;
     top: 0;
     right: 0;
     width: 160px;  
     background-color:#8E8E8C;
}
.jroxHeader{
     width: 100%;
     background-color:#7A7A78;
     height:150px;
}

Answer 2

将display:table 用于父容器，display:table-cell 用于其中的两列。 DOM 中的第一个将在左侧，下一个将在右侧。为您想要的任何一个设置固定宽度，为另一个设置自动宽度，它将填满剩余空间。

这是一个小提琴 - http://jsfiddle.net/ZVP6A/26/

Answer 3

这样做的方法是从左栏中删除float: left;。将此列标记放在右列下方，隐藏分配溢出，它将完美运行。

演示http://jsfiddle.net/kevinPHPkevin/ZVP6A/27/

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