灵活的盒子布局或网格布局或多列

Question

我不知道我需要用什么来创建我的网站的基金。最后，我想要一个主要内容中有3列的设计结构。 （第1列=导航面板，第2列=内容中心，第3列=广告面板）。

什么是最佳实践（如果可能，使用CSS3）来实现这种设计？我介于柔性盒布局或网格布局或多列方法之间。 （我不明白什么是最适合我的情况，为了有一个简单，灵活和少显示bug解决方案）。我也希望我的网站尽可能填满屏幕（使用更多可用空间）。

我是否需要定义屏幕分辨率，或者全部可以用％？

TKX，

Answer 1

当实现结构，我通常这样做以下的（伪码）：

<div id="wrapper"> 
    <div class="column" id="left"> 
    <div class="column" id="middle"> 
    <div class="column" id="right"> 

的wrapper可以是固定的宽度或流体。我通常会在CSS中使用margin: 0 auto来固定宽度并将其居中。

left, middle, right用于列。我会在名为column的类名中设置display: inline-block，并使用它在CSS中的id选择器控制每个单独的列大小。

我喜欢灵活的盒子布局，尽管这很适合这个问题，但我还没有玩得太多。如果我没有弄错，我认为它在所有浏览器中都不被支持，但它可能值得一试。

就处理不同的屏幕尺寸而言，CSS中的媒体查询是一种可行的方式。网络上有大量的资源和分步指南，能够让你随时了解这些情况。希望这可以帮助。