Question

我有一个html文件，当渲染文本底部对齐时。当网络浏览器开放时，整个文本离顶部很远，如下所示：

现在，如果我将网页浏览器窗口缩小，文字就会像这样：

以下是我在html文件中的内容：

<div class="post">

        <h1>Title of Sample Work 2</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus id nisl ut suscipit. Nullam vel justo tellus. Suspendisse vehicula rhoncus nunc sed accumsan. In hac habitasse platea dictumst. Mauris vel dolor velit. Phasellus finibus massa mauris, at interdum nisl luctus at. Etiam porttitor, metus non dapibus pretium, orci arcu pretium nulla, eget congue augue libero at lectus. Mauris pretium urna tristique, laoreet enim rhoncus, euismod tortor.</p>

        <p>Integer dolor nibh, blandit et suscipit in, egestas eu diam. Maecenas imperdiet posuere odio, et tempus sapien efficitur et. Aliquam nec augue efficitur, consectetur elit at, efficitur purus. Fusce sem augue, congue ac metus et, molestie tempus velit. Quisque vitae arcu porttitor, porta augue mollis, consectetur magna. Aenean ante orci, sagittis quis vehicula sit amet, finibus in risus. Sed eu elementum urna. Curabitur quis consequat nunc. Sed sollicitudin purus ac leo volutpat, sit amet rhoncus neque malesuada. Phasellus enim ante, ornare non sapien non, mattis sollicitudin lorem. Phasellus suscipit magna felis, sed ullamcorper tellus molestie ut. Phasellus tincidunt fringilla imperdiet. Fusce rhoncus ultrices sapien, vitae dignissim nunc tincidunt in.</p>

以下是我在css中的内容：

.post {
    margin-top: 5em;
    margin-left: 2em;
    margin-right: 2em;
}

.post p{
    max-width: 1200px;
    padding: .5em;
    text-align: justify;
    margin: 0;
    top: 1.25em;
}

.post h1{
    text-align: center;
}

我尝试将position: absolute;添加到.post{，如下所示：

.post {
    margin-top: 5em;
    margin-left: 2em;
    margin-right: 2em;
    position: absolute;
}

然后它会弄乱左右边缘，因为它可以在这里看到：

可以看出，右边距现在远小于左边距。

关于如何将文本与顶部对齐而不会弄乱左右边距的任何建议都非常感谢。

Answer 1

您可以使用meadia查询根据屏幕宽度设置边距。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

如果您不希望空间位于顶部，请从margin-top: 5em;删除.post

从max-width: 1200px;删除偶数方面的.post p

＆＃13;

.post {
    margin-left: 2em;
    margin-right: 2em;
    text-align: center;
}

.post p {
    padding: .5em;
    margin: 0;
    text-align: justify;
    top: 1.25em;
}

.post h1{
    text-align: center;
}

＆＃13;

<div class="post">     
    <h1>Title of Sample Work 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus id nisl ut suscipit. Nullam vel justo tellus. Suspendisse vehicula rhoncus nunc sed accumsan. In hac habitasse platea dictumst. Mauris vel dolor velit. Phasellus finibus massa mauris, at interdum nisl luctus at. Etiam porttitor, metus non dapibus pretium, orci arcu pretium nulla, eget congue augue libero at lectus. Mauris pretium urna tristique, laoreet enim rhoncus, euismod tortor.</p>
    <p>Integer dolor nibh, blandit et suscipit in, egestas eu diam. Maecenas imperdiet posuere odio, et tempus sapien efficitur et. Aliquam nec augue efficitur, consectetur elit at, efficitur purus. Fusce sem augue, congue ac metus et, molestie tempus velit. Quisque vitae arcu porttitor, porta augue mollis, consectetur magna. Aenean ante orci, sagittis quis vehicula sit amet, finibus in risus. Sed eu elementum urna. Curabitur quis consequat nunc. Sed sollicitudin purus ac leo volutpat, sit amet rhoncus neque malesuada. Phasellus enim ante, ornare non sapien non, mattis sollicitudin lorem. Phasellus suscipit magna felis, sed ullamcorper tellus molestie ut. Phasellus tincidunt fringilla imperdiet. Fusce rhoncus ultrices sapien, vitae dignissim nunc tincidunt in.</p>
</div>

＆＃13;

jsfiddle.net/julysfx/sj3q65kn/1/

Answer 3

尝试在margin属性

中使用px而不是em

index.html中的文本是底部对齐的，我希望它是最顶层的

3 个答案: