0

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

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

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

谢谢。

4

1 回答 1

1

float:left从你的班级中删除，jroxSingleColumn即

将您的CSS更改为：

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

看到这个小提琴

虽然我想建议，但有更清洁的方法可以实现您的最终结果。

于 2013-07-25T21:27:56.690 回答