html - 自适应 2 列布局

Question

我在使用自适应布局的网站上工作，这意味着网站会适应用户屏幕宽度。有三张图片说明了我的想法，图片显示了浏览器窗口从宽到窄调整大小的三个步骤。

宽屏紫色区域贴在页面左侧，绿色区域适合屏幕的其余部分。

中等屏幕绿色区域达到了最小宽度

窄屏绿色区域跳到紫色区域下方

我使用以下样式

.purple_block {
    float: left;
    width: 751px;
    height: 504px;
    margin: 0 35px 100px 0;
}

.green_block{
    min-width: 400px;
}

但是这个“最小宽度”不起作用，因为绿色 block 的宽度是从紫色区域的左边缘到绿色区域的右边缘计算的。

如何实现预期的行为？

更新紫色 block 应该始终固定(它实际上是一个元素画廊)。绿色 block 应该与紫色 block 有边距，看起来像一个适合所有剩余空间的列(这是一个元素描述:几段文字+链接)。当用户缩小其浏览器时，绿色 block 也会变窄。当绿色 block 达到其最小宽度时，它会跳到紫色 block 下方。

Answer 1

看起来您需要特定于屏幕尺寸的 CSS。您可以使用

来定义它

@media only screen and (max-width: ...px) { ... }

因此，对于每个状态(您的个人图像显示它们)，您定义应在该浏览器窗口宽度下更改的 CSS。

例如

@media only screen and (max-width: 1000px) {
    .purple_block {
        float: none;
        width: 100%;
        height: 504px;
        margin: 0 35px 100px 0;
    }

    .green_block{
        width: 100%;
        height: 300px;
    }
}

等等。