在这种情况下如何制作页脚以及如何使图像居中？答案

【问题标题】：How can I make footer in this case and how to center image?在这种情况下如何制作页脚以及如何使图像居中？
【发布时间】：2020-12-25 23:02:18
【问题描述】：

在这种情况下如何制作页脚？当我尝试这样做时，页脚文本与页面顶部重叠。我想把这个页脚放在页面的底部。

第二个问题。我如何才能将这个标题的高度和宽度居中，因为现在只是宽度居中。

我的最后一个问题是这个页面布局正确吗？不就是外表吗？

html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }

body {
    font-family: Garamond;
}
header {
    background-color: #3CB371;
    width: auto;
    height: 150px;
    color: white;
    font-size: 130%;
    text-align: center;
    padding: 10px;
}
section {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.left {
    background-color: #FAEBD7;
    position: absolute;
    left: 0px;
    width: 55%;
    height: 450px;
}

.right {
    background-color: #FAEBD7;
    position: absolute;
    right: 0px;
    width: 45%;
    height: 450px;
}
img {
    padding: 3px;
    margin: 15px;
    border: dotted;
    border-radius: 2px;
    border-color: #3CB371;
}
footer {
    background-color: red;
position: absolute;
}

<!DOCTYPE HTML>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h2>Some H2<h2>
    </header>
    <section>
        <article>
            <div class="right">
                <h3>Some H3</h3>
                <ol>
                    <li value="5">Some5 LI</li>
                    <li value="9">Some9 LI</li>
                    <li value="20">Some20 LI</li>
                    <ol>
                        <a href="url1" target="_blank" rel="noopener">
                            <li>Some href1 text</li>
                            <a href="url" target="_blank" rel="noopener">
                                <li>Some href2 text</li>
                    </ol>
                </ol>
            </div>
            <div class="left">
                <img src="imgurl" alt="Image" class="center">
            </div>
        </article>
</section>
<footer>
Some footer text
</footer>

</body>
</html>

感谢您的帮助！

【问题讨论】：

标签： html css layout frontend footer

【解决方案1】：

首先，您必须关闭 <a> 和 <h2> 等标签。你在结束标签上犯了一些错误。

其次，你必须给你的页脚提供bottom:0;，如果你不这样做，你的页脚会因为position:absolute;而被放置在一个奇怪的地方。

最后，您可以使用float:right; 而不是在您的.right div 中提供position:absolute; right:0;。

【讨论】：

当我将 position:absolute 和 right:0 更改为 float:right 时，我的所有页面都会向上并剪切一些文本等。 bottom:0 在页脚中工作，但如何防止它与部分标签重叠?
@grtyz 你已经使用了 position:absolute;让你的部分居中，对吗？因此，这不是居中的最佳方式。我稍微编辑了你的代码，但我忘了告诉你你必须改变你的居中风格。只需删除您部分的 CSS 内容并添加 display:table; margin:0 auto。

【解决方案2】：

<!DOCTYPE HTML>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Title</title>
    
    <style>
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}    
body {
    min-height:600px;
    width:100%;
    font-family: Garamond;
    background-color: #3CB371;
}
header {
    width: 100%;
    height: 150px;
    color: white;
    font-size: 130%;
    text-align: center;
    padding: 10px;
    border-bottom:1px solid black;
    line-height:150px
}

section {
    min-height:450px;
}

.left {
    
    width: 55%;
    height: 450px;
    float:left;
}

.right {
    border-right:1px solid;
    width: 45%;
    height: 450px;
    float:left;
}
img {
    padding: 3px;
    margin: 15px;
    border: dotted;
    border-radius: 2px;
    border-color: #3CB371;
}
footer {
    footer:100px;
    height:100px;
    border:1px solid black
}
ol{
    text-align:center
}
    </style>
</head>

<body>
    <header>
        <h2>Some H2</h2>
    </header>
    <section>
        <article>
            <div class="right">
                <h3>Some H3</h3>
                <ol>
                    <li value="5">Some5 LI</li>
                    <li value="9">Some9 LI</li>
                    <li value="20">Some20 LI</li>
                    <ol>
                        <li><a href="url" target="_blank" rel="noopener">Some href1 text</a></li>
                        <li><a href="url" target="_blank" rel="noopener">
                            Some href2 text</a></li>
                    </ol>
                </ol>
            </div>
            <div class="left">
                <img src="imgurl" alt="Image" class="center">
            </div>
            <div style="clear:both"></div>
        </article>
</section>
<footer>
Some footer text
</footer>

</body>
</html>

我对您的代码进行了一些更改并添加了边框，以便您轻松理解

【讨论】：

在你的 style.css 文件中添加这个 css 并检查它。