如何使用 HTML 和 CSS 正确格式化网页页脚部分的文本对齐方式

Question

我正在尝试格式化网页的页脚部分，以便地址及其相应信息与联系信息平行。基本上，所有地址信息都在左侧，联系信息在右侧，理想情况下统一对齐。我已经尝试更改一些参数并添加参数以尝试更正格式。

这是我得到的输出。

关于如何纠正这个问题有什么建议吗？这是上下文的代码。

HTML

<!DOCTYPE html>
<html>
<div class="footer-row">
<div class="footer-left">
    <h1>Address</h1>
    <p><strong>Name of place</strong><br>
       <em>at the intersection of such and such</em><br>
       111 address st <br>
       City Name, State 12345 <br>
    </p>
</div>
<div class="footer-right"></div>
    <h1>Contact</h1>
    <p>
       111-222-3333 <br>
       email@email.com<br>
    </p>
</div>
</div>
</html>

CSS

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

Answer 1

您可以使用 display-grid css。当你学会使用时，你永远不会使用其他方式;)

你可以这样使用：

.footer-row {
  display: inline-grid;
  width: 100%;
  grid-auto-flow: column;
}

见JsFiddle

Answer 2

添加flex-direction: column；和在

移除 div 结束标记

<div class="footer-right"></div>

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    
    flex-direction: row;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

<div class="footer-row">
  <div class="footer-left">
      <h1>Address</h1>
      <p><strong>Name of place</strong><br>
         <em>at the intersection of such and such</em><br>
         111 address st <br>
         City Name, State 12345 <br>
      </p>
  </div>
  <div class="footer-right">
      <h1>Contact</h1>
      <p>
         111-222-3333 <br>
         email@email.com<br>
      </p>
  </div>
</div>

Answer 3

因此，您应该做的第一件事是在“footer-right”class 的末尾放下，并确保正确包裹其下方的元素。其次，您只需要 CSS 中的这段代码即可为您提供您正在寻找的非常灵敏的页脚。

.footer-row {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

<!DOCTYPE html>
<html>
<div class="footer-row">
<div class="footer-left">
    <h1>Address</h1>
    <p><strong>Name of place</strong><br>
       <em>at the intersection of such and such</em><br>
       111 address st <br>
       City Name, State 12345 <br>
    </p>
</div>
<div class="footer-right">
    <h1>Contact</h1>
    
    <p>
       111-222-3333 <br>
       email@email.com<br>
    </p>
    </div>
  </div>

</html>

Answer 4

您的css完全正确，无需添加任何规则。问题是 html 结构。删除 <div class = "footer-right"> 之后的结束 </div> 标签就足够了——这是唯一的问题。

我给你加了一个 515px media query，对齐内容。

.footer-row{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-left,.footer-right{
    flex-basis: 45%;
    padding: 10px;
    margin-bottom:20px;
}
.footer-right{
    text-align: right;
}

.footer-row h1{
    margin: 10px 0; 
}

.footer-row p{
    line-height: 25px;
}

@media(max-width: 515px){
    .footer-row{
      justify-content: center;
  }
    .footer-right{
    text-align: left;
}
}

<!DOCTYPE html>

<div class="footer-row">
  <div class="footer-left">
      <h1>Address</h1>
      <p><strong>Name of place</strong><br>
         <em>at the intersection of such and such</em><br>
         111 address st <br>
         City Name, State 12345 <br>
      </p>
  </div>
  <div class="footer-right">
      <h1>Contact</h1>
      <p>
         111-222-3333 <br>
         email@email.com<br>
      </p>
  </div>
</div>

如何使用 HTML 和 CSS 正确格式化网页页脚部分的文本对齐方式

How to correctly format text alignment for the footer section of a webpage with HTML and CSS

html

css

formatting

footer