自适应2列布局

我正在使用自适应布局的网站，这意味着网站适应用户屏幕宽度。有三个图像说明我的想法，图像显示了从宽到窄的三个步骤。自适应2列布局

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

wide screen

中等屏幕 绿化面积 medium screen

窄屏幕 绿化面积下跳紫色区域

narrow screen

达到最小宽度

我用下面的风格

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

.green_block{ 
    min-width: 400px; 
}

但这种“最小宽度”是不行的，因为绿色块宽度从紫色区域一直到绿色区域的右边缘的左边缘计算。

如何达到所需的行为？

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

来源

2012-08-16 Anton Boritskiy

您是否使用媒体查询来更改不同视口宽度的样式？ – jackwanders 2012-08-16 12:50:09

如果我找到你的话，网站启用JavaScript，并有大量代码做不同的事情，但我希望这种布局在没有任何JavaScript的情况下工作。 – 2012-08-16 12:55:22

媒体查询是CSS的一个功能：http://css-tricks.com/css-media-queries/ – jackwanders 2012-08-16 12:58:39

看起来你需要屏幕大小特定的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; 
    } 
}

等等。

来源

2012-08-16 12:55:10

谢谢你的建议，我也会用它。但我希望这种行为可以在没有媒体查询的情况下达成。 – 2012-08-16 12:58:34

在我看来，这是唯一的解决方案。 – 2012-08-20 10:39:12

自适应2列布局

回答

相关问题