切片模板和设计布局，中心体内包装

Question

我有一个pdf模板，其布局如下面的示例pdf image：

PDF说明 模板的总大小是宽度1600 x高度1335 px（在示例图像中显示为绿色背景）在顶部它将有一个新闻/文本滚动，它将覆盖整个页面的宽度，但它的身体部分将更少（它是该区域白色，灰色和黑色）。

我想要什么？ 此布局可适用于最小1024 x 786像素和任何宽度的maixumum。

我应该如何开发页面布局？

固定外部绿框宽度和内部框宽度？百分比都是？或任何固定的和其他百分比？

Answer 1

你想要的基本思想是一个宽度为100％的body元素和一个宽度为1024像素的容器。将margin-left和margin-right设置为auto会将它们置于父体中心。这符合您的基本要求。

body
{
    text-align: center;
    width: 100%;
}

#container
{
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
    min-height: 768px;
    text-align: left;
}