为什么布局没有像图像中那样显示？

Question

我想要像图片中那样的布局结构，其中 "Header" 文本居中对齐，link 居右对齐，在左列中我有一些文本在每个文本下方，一个居中对齐的图像：

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

link "Link" 未与 "Header" 文本正确垂直对齐，并且未正确右对齐
左栏中的图像没有像上图那样居中对齐
右栏中的padding:1em对该栏没有任何影响
页脚没有像上图那样出现在底部

你知道为什么吗？我是初学者，所以我尝试使用边距、浮动等基础知识来实现此布局。

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;}

Answer 1

您可以添加额外的 div 并使其灵活。

Headerwidth:100% content-right: width:50% content-left: width:50% 页脚 width:100%

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

  </body>
</html>

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

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

为什么布局没有像图像中那样显示？

Why the layout is not being displayed like in the image?

html

css

css-float

responsive-design