Question

我正在尝试找到在类似于纸张的网页中间创建部分的最佳方法。例如，我有一个灰色的背景，然后我想把一些内容放在白色的上面。

我的CSS看起来像这样：

body
{
    background:grey;
}

.page
{
    display: table;
    background:white;
    width:100%;
    margin: 0px 50px;
}

我的php文件如下所示：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <div class="page">
        hello this is the content
        </div>  
    </body>
</html>

当我在firefox中渲染页面时，右边距一直到屏幕的末尾，而不是像在左侧那样被填充......

Answer 1

如何使用div类名page作为包装器？

然后添加一个元素div，其属性类名称为content，就像这样

＆＃13;

body
{
    background:grey;
}

.page
{
    display: table;
    background:white;
    width:100%;
}
.content{
    background:red;
    margin: 0px 50px;
}

＆＃13;

<br><br>
<div class="page">
            <div class="content">hello this is the content</div>
</div>

＆＃13;

Answer 2

你在div上的宽度是100％。左边的边距是50px。所以你看到div被从身体左边缘推出50px。您没有看到正确的边距，因为您的宽度等于正文的宽度，因此从技术上讲，右边缘是视口的过去。

轻松修复 - 删除宽度声明并将显示更改为阻止。

.page {
    display: block;
    background:white;
    margin: 0px 50px;
}

div默认是块级元素，因此它会自然地填充其容器（在本例中为body）。无需指定宽度100％。并且真的不需要声明它的显示，但我在这里强调了从一个表到另一个块的变化。

Answer 3

我不确定您为何将.page声明为display:table，因为其中的内容（在您的示例中）未包含在display:table-cell的任何内容中。但是，假设您做希望它保持为display:table，那么您需要删除margin并在其父元素上使用padding（在这种情况下） body）。

body {
    background:grey;
    padding:0 50px; /* <-- added padding */
}
.page {
    display: table;
    background:white;
    width:100%;
    /* removed margin */
}

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <div class="page">
        hello this is the content
        </div>  
    </body>
</html>

右手边距不起作用

3 个答案: