Question

我在页面上有两个元素。一个是主要内容容器，另一个是侧边栏。我想要做的就是让侧边栏始终与最右边对齐 - 无论屏幕分辨率如何，屏幕右侧都是如此，内容容器应该或多或少地位于页面中间

我有一个主容器可以容纳它们。

我尝试的第一件事是在侧边栏上使用absolute positioning，但这不起作用，因为当分辨率改变时，侧边栏会与内容重叠。

为了利益，内容框为632px＆amp;侧栏是272px。

接下来我尝试的是floating这些元素中的每一个都在右边和右边。使用margin-left的{{1}}“百分比”。这显然阻止了重叠;但是现在当分辨率变小到不能包含内容元素时，边距和侧边栏内容元素现在低于侧边栏内容。

所以我想知道无论如何我都能做到这样，屏幕会变得更大并利用水平滚动条而不是让内容下降到侧边栏下方？

Answer 1

为了实现我的问题解决方案，您需要稍微修改一下HTML：

<div id="container">
    <div id="main">
    ...
    </div>
</div>
<div id="sidebar">
   ...
</div>

CSS：

* { margin: 0; padding: 0; } /* Or your favorite CSS reset to ensure that your body/html tag has no margin or padding */
#container { float: left; width: 100%; margin: 0 -272px 0 0; }
#main { float: right; width: 632px; }
#sidebar { float: right; width: 272px; }

我创建了a fiddle来向您展示我发布的内容（请注意，我修改了这些值以便它适合微小的预览屏幕。）

Answer 2

你的问题有点含糊不清;但我认为最简单的解决方案是将主要内容和侧边栏都包装在一个包装器中，并为包装器提供固定的宽度。将主要内容左侧和侧边栏向右浮动，voila！请注意，这将在几乎任何屏幕尺寸上显示相同，并且不会调整大小以适应，但CSS3 Media Queries有助于调整问题大小。

或者，您可以just use percentages处理窗口大小调整，但不能很好地控制尺寸。为了充分利用这两个方面，您需要使用JavaScript，或者如上所述，媒体查询，以便您可以根据浏览器窗口大小动态调整元素大小/重新布局元素。

另一种解决方案是使用tables, which are somewhat frowned upon for use in site layout.

Answer 3

如果我正确地理解你，那应该这样做：

<强> CSS：

/* Pseudo CSS reset */
* { padding:0; margin:0; }

#containerOuter {
    position:absolute;
    width:100%;
    height:100%;
}
#containerInner {
    display:table;
    width:100%;
    height:100%;
}

#hiddenSidebar {
    display:table-cell;
    width:272px;
}

#contentOuter {
    display:table-cell;
    background-color:#999999;
    min-width:632px;
    height:100%;
}

#contentInner {
    margin-left:auto;
    margin-right:auto;
    background-color:#888888;
    width:632px;
    height:100%;
}

#sidebar {
    display:table-cell;
    width:272px;
    min-width:272px;
    background-color:#777777;
}

<强> HTML：

<div id="containerOuter">
    <div id="containerInner">
        <div id="hiddenSidebar"></div>
        <div id="contentOuter">
            <div id="contentInner">Content</div>
        </div>
        <div id="sidebar">Right Sidebar</div>
    </div>
</div>

如何使花车延伸宽度？

3 个答案: