CSS固定宽度右，流体左，右div首先在html中。如何保持折叠状态

我有一个流体宽度左侧div和固定宽度右侧div。花了一段时间才弄清楚如何使这项工作，因为我正在主持一个jrox网站和jrox不会让我改变列生成的顺序。的HTML：CSS固定宽度右，流体左，右div首先在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这个看上去很不错。它几乎完美地工作。我没有注意到问题，直到我遇到一个非常少的jroxSingleColumn内容的页面，如this fiddle。我需要jroxSingleColumn来填充div的其余部分，我需要它是跨浏览器兼容的。我可以更改一些HTML，但右边的列将始终以HTML格式显示。

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

谢谢。

来源

2013-07-25 Dustin Griffith

删除float:left从jroxSingleColumn类即

改变你的CSS这样的：

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

看到这个fiddle

虽然我想建议，有实现的更清洁的方式你的最终结果。

来源

2013-07-25 21:27:56

我在这个问题上犯了一个错误。你的回答对于这个问题是绝对正确的。真正的问题应该是使用[this]（http://jsfiddle.net/ZVP6A/24/）小提琴，但是在创建小提琴时，我重写了较短版本的页面，并按错误顺序重写了它。我应该如何得到一个答案，而没有任何回应这个问题呢？我应该：重新问这个问题吗？编辑这个问题？放弃S/O并自己弄清楚？ –

哈哈，不是一个问题队友，你总是可以回答你的疑惑。为了更好的回应，你可以把它带入一个新的问题，只有规则是，你应该付出努力吧:)。现在，请参阅，因为您无法更改标记，所以没有太多可以完成的工作，我建议您去寻找简单的jQuery代码，以处理左侧div的大小调整。看到这[小提琴]（http://jsfiddle.net/ZVP6A/29/）。为什么使用脚本？你的标记不完全是流动的，因此我们几乎没有其他选择:) –

我喜欢jQuery修复，但我已经转发了正确的措辞[这里]的问题（http://stackoverflow.com/questions/） 17932960），我想我找到了一个很好的解决方案。谢谢。 –

CSS固定宽度右，流体左，右div首先在html中。如何保持折叠状态

回答

相关问题