为什么布局不像图像中那样显示？答案

【问题标题】：Why the layout is not being displayed like in the image?为什么布局不像图像中那样显示？
【发布时间】：2020-07-15 14:06:57
【问题描述】：

我想要一个像图像中一样的布局结构，其中“标题”文本在中心对齐，链接在右侧和左侧对齐我有一些文本，在每个文本下方，一个图像对齐在中心：

但它不能正常工作，我正在尝试像这样“https://jsfiddle.net/e2gvbjyq”这样的布局，但有 3 个问题：

链接“链接”与“标题”文本垂直对齐不正确，右侧未正确对齐
左栏中的图像没有像上图那样在中心对齐
右栏中的padding:1em 对该栏没有任何影响
页脚不像上图那样出现在底部

你知道为什么吗？我是一个初学者，所以我尝试使用margin、float等基础知识来实现这种布局。

HTML

    <!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <header>
      <h1>Title</h1>
      <a href="#">Link</a>
    </header>

    <section id="content-left">
      <article>
        <h2>Left Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis neque atque amet fugit, eveniet at maxime nesciunt. Sint repellat neque necessitatibus ea sequi tempora, dolor non, possimus magni odio</p>
        <img src="http://via.placeholder.com/300">


        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis neque atque amet fugit, eveniet at maxime nesciunt. Sint repellat neque necessitatibus ea sequi tempora, dolor non, possimus magni odio.</p>
        <img src="http://via.placeholder.com/300">


        <p class="issue"><b>(Issue: Images are not aligned at center)</b></p>

      </article>
    </section>
    <section id="content-right">
      <article>
        <h2>Right Title</h2>
        <p class="issue">(Issue: padding left is not working)</p>
      </article>
    </section>
    <footer>
      <h1>Footer</h1>
      <p><b class="issue">(Issue: footer is not at bottom of the page)</b></p>
    </footer>

  </body>
</html>

CSS

*{
    border:0px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    font-family: Arial;
    padding: 5px;
    color: #000;
}

h1{
    text-align: center;
    font-size: 120%;
}

h2{
    font-size: 80%;
}

h3{
    font-size: 75%;
}

header{
    background-color: #cc9;
    padding: 1em;
    background-color: orange;
    text-align: center;
}

header h1{
    display: inline;
}

header a{
    display: inline;
    padding: 0.5em;
    float: right;
    border: 2px solid #000;
    text-decoration: none;
    line-height: 30px;
    font-size: 10pt;
    text-align: center;
}

header a:hover{
    background-color: #EEE;
    color: #000;
    font-weight: bold;
}

footer{
    min-height: 100px;
    background-color: #cc9;
    padding: 1em;
    background-color: orange;
    text-align: center;
}


article{
    padding:1em;
    text-align: left;
}

article p{
    margin: 1rem 0 1rem 0;
    font-size: 70%;
}

article img{
    text-align: center;
    max-width: 100px;
}

#content-left{
    width: 50%;
    float: left;
    background-color: green;
    padding: 1em;
}

#content-right{
    background-color: red;
    padding: 1em;
}

.issue{color:yellow;}

【问题讨论】：

标签： html css responsive-design css-float

【解决方案1】：

您可以添加额外的 div 并使其具有弹性。

页眉宽度：100% 内容右：宽度：50% 左内容：宽度：50% 页脚宽度：100%

  <body>
<div class="conteiner">
    <header>
    <section id="content-right">
    <section id="content-left">
    <footer>
    </div>

  </body>
</html>

.conteiner{
  display:flex;
  flex-wrap: wrap;
}

链接到您的代码： https://codepen.io/Vova_Champion_1/pen/JjdqbLr

【讨论】：

谢谢，但这样也不能正常工作。例如这里的“jsfiddle.net/e2gvbjyq/1”，标题中的链接不仅出现在标题中，而且出现在标题中，而且出现在正确的内容部分中。此外，右侧内容部分的内容出现在左侧内容部分。
首先，您忘记添加#container{ display:flex; flex-wrap: wrap;} 在你的代码中。其次，您忘记添加#content-right{width: 50%;}，最后您的链接的高度高于标题，因此从标题中删除a{ line-height: 30px;} 或使您的标题更高。 codepen.io/Vova_Champion_1/pen/JjdqbLr
谢谢，你知道为什么文章img没有居中对齐吗？示例：jsfiddle.net/cwrmpf05
我知道，只需删除标签“文章”（不是文章 img {}，是 img {}）。我没有在您的 HTML 中找到“文章”。如果我的回答对你有用，请采纳。