Question

我正在创建一个网站，我希望在窗口中央始终可以看到某个div。在该div的旁边，在左侧和右侧，我想要另一个div保持在居中的div旁边。居中的div可能比两个div更短。然而，困难的部分是当窗口缩小时，我不希望（右）侧div在较短的中心div下移动，而是保持在它旁边并最终在仅显示居中的div时隐藏。

下面的小提琴说明了所期望的情况以及实际情况。当宽度足够时，显示所有三个框（红色= 1，绿色= 2，蓝色= 3）。但是当缩小窗口时，只能看到2个窗口。但是，现在当没有足够的空间来显示3时，它会在2下方移动。我希望它保持在2旁边，只是看不见，就像方框1一样。

HTML：

<div class="outer">
    <div class="innerleft">
        <div style="width: 300px; height: 300px; background-color: red;">1</div>
    </div>
    <div class="innercenter">
        <div style="width: 500px; height: 100px; background-color: green;">2</div>
    </div>
    <div class="innerright">
        <div style="width: 300px; height: 300px; background-color: blue;">3</div>
    </div>
</div>

CSS：

.outer {
    text-align: center;
    color: white;
    background: purple;
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.innerleft {
    display: inline-block;
    position: absolute;
    margin-left:-300px;
}
.innercenter {
    margin: 0 auto;
    display: inline-block;
}
.innerright {
    display: inline-block;
    position: absolute;
}

JSFiddle

非常感谢您的帮助。提前谢谢！

Answer 1

将margin-left:-300px;替换为right: calc(50% + 250px);中的.innerleft，然后将left: calc(50% + 250px);添加到.innerright即可。

这里做的是我将div的左侧和右侧的距离设置为无法通过调整页面大小或缩放页面来改变的距离。

从侧面计算50%，+中心div宽度的50％。

此解决方案仅适用于中心div的静态宽度不能/不会更改的情况。

Fiddle here

缩放时防止DIV移动

1 个答案: