0

我有一个流体宽度的左 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;
}

正如你在这个小提琴中看到的那样，上面看起来很棒。它工作得几乎完美。直到我遇到 jroxSingleColumn 中内容很少的页面，就像在这个小提琴中一样，我才注意到任何问题。我需要 jroxSingleColumn 来填充 div 的其余部分，并且我需要它与跨浏览器兼容。我可以更改一些 HTML，但左列 (jroxSingleColumn) 将始终位于 HTML 中。

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

谢谢。

- - - 注意： - - -

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

4

3 回答 3

0

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

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

于 2013-07-29T20:23:54.547 回答
0

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

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

.jroxSingleColumn{
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
  overflow:hidden;
}
于 2013-07-29T20:27:31.197 回答
0

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

删除浮动，适用position: relative;于#jroxContent和。之后，只需使用 移动到右上角。position: absolute;.jroxRightColumn.jroxRightColumntop: 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;
}
于 2013-07-29T20:33:10.017 回答