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看到的那样，这看起来很棒。它几乎完美地工作。直到我在this fiddle中遇到jroxSingleColumn中包含很少内容的页面时，我才注意到并发出问题。我需要jroxSingleColumn来填充div的剩余部分，我需要它与浏览器兼容。我可以更改一些HTML，但右列始终是HTML格式。

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

感谢。

Answer 1

从float:left类中移除jroxSingleColumn，即

将你的CSS更改为：

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

请参阅此fiddle

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

CSS固定宽度右，流畅左，右div是html中的第一个。我如何防止倒塌

1 个答案: