html - 放置页脚元素

Question

我目前正在做一项学校作业，我们只能使用 HTML + CSS(和 PHP 来包含重复的元素，在这种情况下是导航栏 + 页脚)。

对于页脚，我想在页脚的“左”-“中”-“右”部分放置 3 个元素。

左:用于输入带有“注册”按钮的电子邮件的时事通讯栏

中心:3 行文本 - 地址、联系方式、营业时间。

右:2 个图标 - 1 个用于学校，1 个用于企业'。

这是我的代码:

HTML: 
<footer>
  <div class="footer">
      <p class="left">Sign up botton here</p>
      <p class="right">School - business here</p>
      <p class="centered">3 lines with address, contact info, and opening hours.</p>
  </div>

CSS: 
.left{
  text-align:left;
  float:left;
}

.right{
  float:right;
  text-align:right;
}

.centered{
  text-align:center;
}


.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
   background:#052D48;
}

.footer p {
  color: #fff;
  font-size: 8px;
}

我该怎么做？几个小时以来，我一直在阅读和尝试一些东西，但我变得更加困惑。

i.imgur.com/6IFJnxF.png 这是我脑海中的图片

希望有人能在正确的方向上帮助我，非常感谢!

Answer 1

使用 flexbox 并将所有内容包装在一个容器中，并用 100% 宽度包装一行。然后将每个 block 除以 X 百分比。我用无序列表更改了 p 标签。

.row{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.left{
  width: 33%;
  height: 40px;
}

.right{
  width: 33%
}

.right ul{
  list-style: none;
  color: white;
}

.middle{
  width: 33%
}
.centered{text-align:center;}

.flex{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.footer {
  
padding: 20px 10px;

   background:#052D48;
}

.footer p{
  font-size: 1.3em;
  color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
  <div class="footer">
    <div class="row">
      <div class="left flex">
     <input type="text" class="" placeholder="Email">
        <input type="submit" class="" value="Submit">
      </div>
      

      
      <div class="right centered ">
        <ul class="flex-column">
          <li><i class="fa fa-map-marker" aria-hidden="true"></i>     Address.</li>
          <li><i class="fa fa-phone" aria-hidden="true"></i> Contact Info</li>
          <li><i class="fa fa-clock-o" aria-hidden="true"></i> Opening Hours.</li>
        </ul>
        </div>
      <div class="middle centered">
            <p class="">School - business here</p>
      </div>

    </div>
  </div>
</footer>