如何将页脚上的文本直接放在彼此之下？

Question

我想知道我的文本如何在三个不同的列中将我的文本直接放在页脚下

现在只有左栏好中心，右栏坏了

＆＃13;

＆＃13;

.footer {
  /* The dividing footer: */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #efebe785;
  color: #000000;
  text-align: center;
  border: 1px solid #00000094;
}

.left {
  text-align: left;
  float: left;
  top: 1em;
  left: 1em;
}

.right {
  float: right;
  text-align: right;
  top: 1em;
  right: 1em;
  position: relative;
  display: inline;
}

.centered {
  text-align: center;
  top: 1em;
  position: relative;
  display: inline;
  padding
}

＆＃13;

<div class="footer">
  <div class="left">
    <p class="left">
      <font size="5">SOCIAL</font> <br/><br/>
      <font size="3">Facebook </font> <br/><br/>
      <font size="3"> Twitter </font> <br/><br/>
      <font size="3"> Youtube </font>
    </p>
  </div>
  <div class="right">
    <p class="right">
      <font size="5">EXTRA</font> <br/><br/>
      <font size="3">Our Chefs</font>
    </p>
  </div>
  <div class="center">
    <p class="centered">
      <font size="5">SUPPORT</font> <br/><br/>
      <font size="3">Tellphone</font> <br/><br/>
      <font size="3">Email</font>
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您有商品列表，那么使用<li></li>代码是一种非常好的做法。在这种情况下，您有链接，对于链接目标，您应该使用<a href="#"></a>。每个HTML Tag都是为特定目的而创建的。

而且，对于columns layout，我使用了CSS Grid Layout。 Grid Layout它非常强大，它可以帮助您以多种不同的方式组织您的布局。您只需指定父元素display: grid;，并在此处添加如何显示列。在我们的例子中，我们有三列，这些列具有相同的宽度，因此，我添加了grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;

• Fr是一个小数单位，1fr是1个可用空间

为了更好的参考，我建议：Complete Guide To CSS Grid System

希望我已经清楚了！

您的代码结构应如下所示：

＆＃13;

＆＃13;

.footer {
  /* The dividing footer: */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #efebe785;
  color: #000000;
  text-align: center;
  border: 1px solid #00000094;
  padding: 0 20px;
}

ul {
  padding: 0;
}

ul li {
 list-style: none;
}

.links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.links li {
  margin-bottom: 10px;
}

.link-item {
    padding: 0;
    text-align: left;
}

.link-item.centered {
 text-align: center;
}

.link-item.right-aligned {
 text-align: right;
}


.link-item a {
    color: #333;
    font-size: 16px;
    text-decoration: none;
}

.link-item a:hover {
  color: blue;
}

＆＃13;

<div class="footer">
  <div class="links">
  <div class="link-item">
  <h3>Social</h3>
    <ul>
      <li>
        <a href="#">Facebook</a>
      </li>
       <li>
        <a href="#">Twitter</a>
      </li>
       <li>
        <a href="#">Youtube</a>
      </li>
    </ul>
  </div>
  <div class="link-item centered">
  <h3>Support</h3>
    <ul>
      <li>
        <a href="#">Tel</a>
      </li>
       <li>
        <a href="mailto:example@gmail.com">Email</a>
      </li>
    </ul>
  </div>
  <div class="link-item right-aligned">
  <h3>Extra</h3>
    <ul>
      <li>
        <a href="#">Our Chefs</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

文字未在center和right列中正确对齐，因为它们的文字对齐方式为center和right，而不是left }。

不是使用文本对齐方式构建列，而是将它们全部设置为父宽度的三分之一，并为它们提供所有左对齐文本。请参阅以下代码段。

＆＃13;

＆＃13;

.footer {
  /* The dividing footer: */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #efebe785;
  color: #000000;
  /* Align all the text left so it lines up */
  text-align: left;
  border: 1px solid #00000094;
}

/* Build 3 equal-width columns inside the footer */
.left, 
.right, 
.center {
  float: left;
  width: 33.333%;
  position: relative;
  box-sizing: border-box;
  padding-right: 15px;
  padding-left: 15px;
}

＆＃13;

<div class="footer">
  <div class="left">
    <p class="left">
      <font size="5">SOCIAL</font> <br/><br/>
      <font size="3">Facebook </font> <br/><br/>
      <font size="3"> Twitter </font> <br/><br/>
      <font size="3"> Youtube </font>
    </p>
  </div>
  <div class="right">
    <p class="right">
      <font size="5">EXTRA</font> <br/><br/>
      <font size="3">Our Chefs</font>
    </p>
  </div>
  <div class="center">
    <p class="center">
      <font size="5">SUPPORT</font> <br/><br/>
      <font size="3">Tellphone</font> <br/><br/>
      <font size="3">Email</font>
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先你需要删除一些过时的标签，如font，因为它没有more supported with HTML5（即使某些浏览器仍然支持它），那么你可以避免两次使用同一个类并使用重构HTML inline-block代替float这样：

＆＃13;

＆＃13;

.footer {
  /* The dividing footer: */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #efebe785;
  color: #000000;
  text-align: center;
  border: 1px solid #00000094;
}

.left,
.right,
.center {
  width: 30%;
  display: inline-block;
  vertical-align: top;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

＆＃13;

<div class="footer">
  <div class="left">
    <p>
      SOCIAL <br/><br/> Facebook <br/><br/> Twitter <br/><br/> Youtube
    </p>
  </div>
  <div class="center">
    <p>
      SUPPORT <br/><br/> Tellphone <br/><br/> Email
    </p>
  </div>
  <div class="right">
    <p>
      EXTRA<br/><br/> Our Chefs
    </p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

对于更高级的结构，你可以考虑像这样的flexbox：

＆＃13;

＆＃13;

.footer {
  /* The dividing footer: */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: #efebe785;
  color: #000000;
  text-align: center;
  border: 1px solid #00000094;
  display:flex;
}

.left,
.right,
.center {
  flex:1;
  margin:0 10px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

＆＃13;

<div class="footer">
  <div class="left">
    <p>
      SOCIAL <br/><br/> Facebook <br/><br/> Twitter <br/><br/> Youtube
    </p>
  </div>
  <div class="center">
    <p>
      SUPPORT <br/><br/> Tellphone <br/><br/> Email
    </p>
  </div>
  <div class="right">
    <p>
      EXTRA<br/><br/> Our Chefs
    </p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是你需要的css（使用flex）：

.footer{
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border:1px solid #00000094; 
display: flex;
}

.left, .center, .right{
flex-grow:1
}

https://jsfiddle.net/8wxn9sp4/