Question

第一次问问这里。

我有一个由2列组成的盒装布局（最大宽度1014像素）。

右列的宽度为400px并滚动。

左栏需要固定在左栏的左上角（不是滚动），占据“盒子”的剩余可用宽度，并在较大的屏幕尺寸下保留在“盒子”内。

在小于1024px的屏幕尺寸时，只有左列应以流畅的方式牺牲宽度，而右列保持其宽度。

有什么建议吗？

Answer 1

这就是你要找的东西。

基本上，具有流体布局的固定左侧div，但在1024px处有一个断点，将其转换为固定宽度的固定div，通过左边距黑客进行居中。

<div class="box">
    <div class="left-col">
        left
    </div>
    <div class="right-col">
        right
    </div>
</div>
<style>
body {
    margin: 0;
}
.box {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
}
.right-col {
    position: absolute;
    right: 0px;
    width: 400px;
}
.left-col {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 400px;
}
@media screen and (min-width: 1024px) {
    .left-col {
        width: 624px;
        left: -512px;
        right: initial;
        margin-left: 50%;
    }
}
</style>

保持固定元素在盒装布局中的位置，响应式设计

1 个答案: