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

我有一个流体宽度左div和固定宽度右div。花了一段时间才弄清楚如何完成这项工作，因为我正在主持一个jrox站点，jrox不会让我改变列生成的顺序。该HTML：CSS（固定宽度右边，流体左边，左边是html中的第一个）如何让左边的div不折叠？

<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小提琴看到上面看起来不错。它几乎完美地工作。我没有注意到任何问题，直到我遇到了一个非常小的内容在jroxSingleColumn页面，如this小提琴。我需要jroxSingleColumn来填充div的其余部分，我需要它是跨浏览器兼容的。我可以更改一些HTML，但左列（jroxSingleColumn）将始终使用HTML。

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

谢谢。

-----注意-----

有一天，我问同样的问题，但我有HTML代码错误。我查看了所有的stackoverflow.com，找到正确的方法去解决我的错误，我在这种情况下没有发现什么。我相信我已经做了正确的事情，接受了我错误提问的正确答案，并用正确的措辞重新提出了问题。不正确的问题是here。该修补程序无法以正确的顺序处理HTML。

来源

2013-07-29 Dustin Griffith

下面是使用的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; 
}

来源

2013-07-29 20:33:10 hungerstar

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

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

来源

2013-07-29 20:23:54 cowboybebop

我可能会像这样的东西，但我想它的IE7和支持，而不会过多[条件注释]搞乱（HTTP：/ /www.quirksmode.org/css/condcom.html）。 –

好的。如果有帮助，它适用于IE 8+。 – cowboybebop

做到这一点是从左侧栏中删除float: left;的方式。将此列标记放在右侧列，分配溢出隐藏下，它将完美工作。

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

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

来源

2013-07-29 20:27:31 Vector

OP表示左栏始终是第一栏，他们无法调整。 – hungerstar

虽然你的答案将是我的首选，如果可以切换标记。 – hungerstar

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

回答

相关问题