Question

我正在尝试将文本添加到页脚中，但是第二和第三文本在页脚下方。如何将其放入页脚中？我知道它与块级有关，但是到底需要做什么。请并感谢您抽出宝贵时间回答我的问题。

#footer {
  background: #2e3131;
  position: relative;
  height: 165px;
  margin-top: -100px;
  clear: both;
}

.footer-contact {
  color: #fff;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}

<footer id="footer">
  <div class="footer-contact">
    <h3>Contact Us</h3>
    <p>Phone: (777) 777-7777</p>
    <p>Cell: (347) 777-7777</p>
    <p>E-mail: someone@gmail.com</p>
  </div>

  <div class="headquaters">
    <h3>Locations</h3>
    <p>90 John Street</p>
  </div>


  <div class="social-media">
    <h3>Follow our social media</h3>
    <i style="font-size:24px" class="fa">&#xf230;</i>
  </div>

</footer>

Answer 1

您可以在页脚中添加以下样式：#footer {width:100%; display:inline-block;}

#footer {
  background: #2e3131;
  position: relative;
  clear: both;
  width:100%;
  display:inline-block;
}

.footer-contact {
  color: #fff;
  float:left;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
  float:left;
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}

<footer id="footer">
          <div class="footer-contact">
            <h3>Contact Us</h3>
              <p>Phone: (777) 777-7777</p>
              <p>Cell: (347) 777-7777</p>
              <p>E-mail: someone@gmail.com</p>
            </div>

            <div class="headquaters">
              <h3>Locations</h3>
                <p>90 John Street</p>
            </div>


              <div class="social-media">
               <h3>Follow our social media</h3> 
                <i style="font-size:24px" class="fa">&#xf230;</i>
                  </div>

                   </footer>

Answer 2

删除margin-top:-100px;并将float赋予div，以在您的footer高度内嵌

#footer {
  background: #2e3131;
  position: relative;
  height: 165px;
  margin-top: 0px;
  clear: both;
}

.footer-contact {
  color: #fff;
      float: left;
    width: 33.33%;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);    
  float: left;
    width: 33.33%;
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}

<footer id="footer">
          <div class="footer-contact">
            <h3>Contact Us</h3>
              <p>Phone: (777) 777-7777</p>
              <p>Cell: (347) 777-7777</p>
              <p>E-mail: someone@gmail.com</p>
            </div>

            <div class="headquaters">
              <h3>Locations</h3>
                <p>90 John Street</p>
            </div>


              <div class="social-media">
               <h3>Follow our social media</h3> 
                <i style="font-size:24px" class="fa">&#xf230;</i>
                  </div>

                   </footer>

Answer 3

我认为使用flexbox会更简单，并且在尝试定位元素时也要避免使用负边距值

#footer {
  background: #2e3131;
  position: relative;
  top: 100px;
  height: 165px;
  display: flex;
  justify-content: space-between;
}

.footer-contact {
  color: #fff;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}

<footer id="footer">
  <div class="footer-contact">
    <h3>Contact Us</h3>
    <p>Phone: (777) 777-7777</p>
    <p>Cell: (347) 777-7777</p>
    <p>E-mail: someone@gmail.com</p>
  </div>

  <div class="headquaters">
    <h3>Locations</h3>
    <p>90 John Street</p>
  </div>


  <div class="social-media">
    <h3>Follow our social media</h3>
    <i style="font-size:24px" class="fa">&#xf230;</i>
  </div>

</footer>

Answer 4

实际上，您是在#footer中添加以px为单位的高度，您需要做的是增加高度。

#footer {
  background: #2e3131;
  position: relative;
  height: 500px;
  margin-top: -100px;
  clear: both;
}

或者您可以选中here

页脚外的文本

4 个答案: