css - 切片模板和设计布局，中间主体内包装

Question

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

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

我想要的是？ 此布局可能适合最小 1024 x 786 像素，最大适合任何宽度。

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

固定外绿盒宽度和内盒宽度？都是百分比？或任何一个固定的百分比？

Answer 1

你想要的基本概念是一个宽度为 100% 的 body 元素和一个宽度为 1024 px 的容器。将 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;
}