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

我建议将该类从footer中删除，并使用footer标记来定位父容器。然后，我会为每个部分使用div标记而不是p标记，将p标记放在div内。我的最后一条建议，即你的教授认为你会作弊，就是使用flexbox。请享用。另外，box-sizing: border-box;用于我添加到footer的填充，因此它仍然是width: 100%;而不是100％+ 40px

＆＃13;

* {
  box-sizing: border-box;
}

.left {}

.centered {}

.centered p {}

.right {}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #052D48;
}

footer p {
  margin: 0;
  color: green;
  font-size: 8px;
}

＆＃13;

<footer>
  <div class="left">
    <p>Sign up botton here</p>
  </div>
  <div class="centered">
    <p>1 line</p>
    <p>2 line</p>
    <p>3 line</p>
  </div>
  <div class="right">
    <p>School - business here</p>
  </div>
</footer>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是一个想法。 https://jsfiddle.net/gztLhdk4/2/ 您可以根据自己的需要进行更多自定义。

<footer>
  <div class="footer">
      <div class="left padd">
        <p>
        Sign up botton here
        </p>
        <p>
        <input type="text"> <button>sign up </button>
        </p>
      </div>
      <div class="centered padd">
      <p>
      rttertertert<br>
      gereryrt ytyt<br>
      tryryrytru
      </p>
      </div>
      <div class="right padd">
        <div>
          school
        </div>
        <div>
          business
        </div>
      </div>

  </div>
  </footer>

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

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

.centered{
  text-align:center;width:50%;float:left;
}


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

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

放置页脚元素

3 个答案: