Question

我记得一会儿问这个问题，但我似乎无法再找到它！我搜索过但似乎无法找到我正在寻找的解决方案。

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

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

有什么建议吗？

Answer 1

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

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

Answer 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％。

高度和背景颜色只是为了看看最新情况：）

Answer 3

给两个div增加50％的宽度所以他们一起占据100％的宽度

CSS：浮动两个div元素，屏幕宽度为100％？

3 个答案: