自适应2列布局

Question

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

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

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

缩小屏幕 绿色区域在紫色区域下跳跃

我使用以下样式

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

.green_block{
    min-width: 400px;
}

但是这个'min-width'不起作用，因为绿色块的宽度是从紫色区域的左边缘到绿色区域的右边缘计算的。

如何实现理想的行为？

更新 紫色块应该总是固定（实际上是一个项目库）。 绿色块应该具有紫色块的边距，看起来像一个适合所有空间的列（它是一个项目描述：几段文本+链接）。 当用户缩小其浏览器绿色块时也变得更窄。当绿色块达到其最小宽度时，它会跳到紫色块下面。

Answer 1

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

定义它

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

因此，对于每个州（您的单个图像都显示它们），您可以定义应在该浏览器窗口宽度处更改的CSS。

E.g。

@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;
    }
}

等等。