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

Question

我不知道我需要用什么才能创建我网站的基金。简而言之，我想在主要内容中包含 3列的设计结构。 （第1列=导航面板，第2列=内容的中心，第3列=广告面板）。

实现此设计的最佳实践（如果可能，使用CSS3）是什么？我hesite之间的灵活的框架布局或网格布局或多列方法。 （我不明白什么是最适合我的情况，以便有一个简单，灵活，少显示错误的解决方案）。我还希望我的网站尽可能地填充屏幕（使用更多可用空间）。

我是否需要定义屏幕分辨率，或者只能使用％？

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用于列。我会在名为display: inline-block的类名中设置column，并使用CSS中的id选择器控制每个列的大小。

我喜欢灵活的盒子布局，因为这非常适合这个问题，但我还没有玩很多。如果我没有弄错的话，我认为它并不支持每个浏览器，但它可能值得一试。

就处理不同的屏幕尺寸而言，CSS中的媒体查询是可行的方法。网络上有许多资源和分步指南，可以让您立即开始使用它。希望这会有所帮助。