当前位置：文江博客话题详情

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

发布于 2024-12-03 13:08:44 字数 256 浏览 1 评论 0原文

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

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

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

有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋叶绚丽 2024-12-10 13:08:44

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

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

I believe you would have to have a container and set the container width to 200%. The two inside divs with 50% width will fit inside.

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

回复收藏 0 原文

久夏青 2024-12-10 13:08:44

你可以绝对地定位它们。

<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%。

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

You could position them absolutely.

<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>

They are positioned absolutely within the bound of the relatively positioned parent.

Then you switch between them you just switch the left values, from 0 to 100% respectively.