CSS：在屏幕外浮动两个 100% 宽度的 div 元素？答案

【问题标题】：CSS: Floating two div elements with 100% width off screen?CSS：在屏幕外浮动两个 100% 宽度的 div 元素？
【发布时间】：2011-11-12 08:19:24
【问题描述】：

我记得不久前问过这个问题，但我似乎再也找不到了！我已经搜索过，但似乎找不到我正在寻找的解决方案。

假设我有两个 100% 宽度的 div 彼此相邻浮动。由于它们占据了整个屏幕宽度，因此不再有任何空间可供它们浮动，因此第二个 div 出现在第一个 div 下方。我想要的是让第二个 div 继续漂浮在第一个旁边的屏幕之外。

我认为我得到的解决方案是将 display 属性设置为其他值，但我不完全确定。

有什么建议吗？

【问题讨论】：

overflow: scroll; 或 overflow: hidden; 取决于您是否希望滚动条出现。
不，我不想向右滚动。我只是想让它离开屏幕，不可见。
如果你想让它不可见，为什么不直接设置display: none？
因为如果我将第一个 div 的宽度设置为 0px，我希望另一个 div 再次完全可见。
好的，你是说愿意还是不想要部分可见性？如果你想允许部分可见，overflow: hidden; 应该可以工作。

标签： css html css-float off-screen

【解决方案1】：

我相信您必须有一个容器并将容器宽度设置为 200%。两个宽度为 50% 的内部 div 将适合内部。

#container_div{ width:200%}
.inner_div {width:50%}

【讨论】：

嗯，是的，我想这可能会奏效。但是我必须将 .inner_div 设置为 50% 的宽度。明白了吗？但我会试一试！

【解决方案2】：

你可以绝对定位它们。

<body style="padding:0; margin:0">
    <div style="width:100%; position:relative;">
        <div style="width:100%; height:100px; background:#f90; position:absolute; top:0; left:0;">COLUMN1</div>
        <div style="width:100%; height:100px; background:#f00; position:absolute; top:0; left:100%;">COLUMN2</div>
    </div>
</body>

它们绝对定位在相对定位的父级范围内。

然后你在它们之间切换你只需切换左边的值，分别从 0 到 100%。

高度和背景颜色只是为了看看发生了什么:)

【讨论】：

【解决方案3】：

给两个 div 50% 的宽度所以它们一起占据 100% 的宽度

【讨论】：