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小提琴，上面看起来很棒。它几乎完美地工作。直到我在this小提琴中看到jroxSingleColumn中包含很少内容的页面时才发现任何问题。我需要jroxSingleColumn来填充div的剩余部分，我需要它与浏览器兼容。我可以更改一些HTML，但左栏（jroxSingleColumn）将始终以HTML格式。

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

感谢。

-----注意：-----

前几天我问了同样的问题，但我的HTML代码错了。我遍布stackoverflow.com，找到了解决错误的正确方法，在这种情况下我什么都没发现。我相信我已经做了正确的事情，接受了我错误提问的正确答案，并用正确的措辞重新提问。不正确的问题是here。该修复程序无法以正确的顺序使用HTML。

Answer 1

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

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

Answer 2

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

DEMO http://jsfiddle.net/kevinPHPkevin/ZVP6A/27/

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

Answer 3

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

移除花车，将position: relative;应用于#jroxContent，将position: absolute;应用于.jroxRightColumn。之后，只需使用.jroxRightColumn将top: 0; right: 0;移至右上角。

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

CSS（固定宽度右，液体左，左边是html中的第一个）如何保持左div不折叠？

3 个答案: