如何解决如何使用HTML和CSS正确设置网页页脚部分的文本对齐格式
我正在尝试格式化网页的页脚部分,以使地址及其相应的信息与联系信息平行。基本上,所有地址信息都将在左侧,而联系信息则在右侧,并且理想地是统一对齐。我尝试更改一些参数并添加参数,以尝试纠正格式。
这是我得到的输出。
有关如何更正此问题的任何建议? 这是上下文代码。
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;
}
解决方法
添加flex-direction: column
;
和
删除
您可以使用display-grid
CSS。当您学会使用时,您永远不会使用其他方式;)
您可以这样使用:
.footer-row {
display: inline-grid;
width: 100%;
grid-auto-flow: column;
}
请参见JsFiddle
,您的CSS绝对正确,不需要添加任何规则。问题是html结构。只需删除</div>
之后的结束<div class = "footer-right">
标记,这是唯一的问题。
我为您添加了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>
,
因此,您应该做的第一件事是在“页脚右”类的末尾放置,并确保将元素正确包装在其下。其次,您只需要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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。