Question

我正在尝试构建一个大致类似于this JSFiddle的布局。现在，问题是：

我的container里面有两个包装器，一个用于侧边栏，另一个用于页面内容本身（wrapper-inner-container），两个都浮动到左边，{{1}有一个隐藏和显示的机制。

问题是，当wrapper-sidebar可见时，wrapper-sidebar wrapper-inner-container width的{{1}}应保持浮动在同一行的左侧因为100vw和父wrapper-sidebar应保持container width 100vw，只是隐藏水平溢出。但是，正如您在JSFiddle中看到的那样，由于同一行中的两个包装器都超过了容器的宽度，wrapper-inner-container跳转到下一行，当它应该保持在同一行时作为wrapper-sidebar并保留width 100vw。我如何实现这一目标？

Answer 1

如果您的目的是wrapper-inner-container占用wrapper-sidebar可见或不可见的剩余空间。然后，您可以忽略wrapper-inner-container的宽度并删除float: left。然后它会自动调整为100％的可用空间，因为它是一个块元素。

https://jsfiddle.net/bdxs8x9r/4/（已更新）

此处还有一个示例，说明如何使用flex-box更加一致地实现它：

这里的诀窍是wrapper-sidebar有一个固定的宽度，wrapper-inner-container会弯曲到容器中剩余的空间。

https://jsfiddle.net/bdxs8x9r/3/

Answer 2

为此，您必须创建一个包含主容器的父容器，您将其溢出设置为隐藏，其宽度设置为 100vw

然后将主容器宽度设置为 100vw加上侧边栏大小，这样边栏就会有空间将内部容器推入

<style>
.overflow {
    width: 100vw;
    overflow: hidden;
}
.container {
    width: 115vw;
}
.wrapper-sidebar {
    float: left;
    width: 15vw;
}
.wrapper-inner-container {
    width: 100vw;
    float: left;
}
</style>

<script>
 // do your animation code here
</script>

<div class="overflow">
    <div class="container">
        <div class="wrapper-sidebar"></div>
        <div class="wrapper-inner-container"></div>
    </div>
</div>

将两个浮动div保留在较小容器内的同一行上

2 个答案: