具有相对宽度的双列布局？

Question

我有一个两列布局，使用一个容器和一个名为“left”的div和一个名为“Right”的div。我如何确保div＃right仅为500px，但div＃left与用户浏览器允许的一样大......？

这就是我现在所拥有的：

<div id="container">
  <div id="left" style="float:left"> </div>
  <div id="right" style="float: right; width: 500px"> </div>
</div>

Answer 1

不要将左div浮动到左侧。如果您将其保留为“未展开”状态，则它将成为主要内容并自动填充可用空间。

Answer 2

你可以通过解开#left div并给它一个填充左边等于#right div的宽度（这为正确的div腾出空间）来做到这一点。最后，您需要交换两个div的源顺序。

<div id="container">
    <div id="right" style="float: right; width: 100px; "> </div>
    <div id="left" style="padding-right: 100px; "> </div>
</div>

你可以see it in action here。

Answer 3

将您的样式更改为div：

<div id="left" style="margin-right:500px"></div>

这将确保当左侧内容比右侧内容占用更多垂直空间时，内容不会在右侧浮动div下流动。

重要

不要忘记将浮动的div放在未开启的地方前面。所以把你的右边放在标记中，然后放在左边标记中。

解决您的特定问题

所以你有两个div元素

<div id="endants-content">
    <div id="screenshot-preview">...</div>
    <div id="endants-main-content">...</div>
</div>

CSS应该像这样使它按预期工作：

div#endants-content
{
    /* put min-width here is you need it */
}

div#screenshot-preview
{
    float:right;
    width:30%;
}

div#endants-main-content
{
    margin-right:30%;
    overflow:auto;
}