我想要有一个如图所示的布局结构，其中“标题”文本在中心对齐，链接在右侧对齐，在左列中我有一些文本，在每个文本下方，有一个在中心对齐的图像：但它无法正常工作，我试图获得这样的布局“ https://jsfiddle.net/e2gvbjyq ”，但有 3 个问题：链接“链接”未与“标题”文本正确垂直对齐，且未正确右对齐左列中的图像没有像上图那样在中心对齐右列中的对该padding:1em列没有任何影响页脚不会像上图那样出现在底部你知道为什么吗？我是初学者，所以我尝试使用 margin、float 等基础知识来实现这种布局。超文本标记语言 <!DOCTYPE html><html> <head> <title>Title of the document</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header> <h1>Title</h1> <a href="#">Link</a> </header> <section id="content-left"> <article> <h2>Left Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis neque atque amet fugit, eveniet at maxime nesciunt. Sint repellat neque necessitatibus ea sequi tempora, dolor non, possimus magni odio</p> <img src="http://via.placeholder.com/300"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis neque atque amet fugit, eveniet at maxime nesciunt. Sint repellat neque necessitatibus ea sequi tempora, dolor non, possimus magni odio.</p> <img src="http://via.placeholder.com/300"> <p class="issue"><b>(Issue: Images are not aligned at center)</b></p> </article> </section> <section id="content-right"> <article> <h2>Right Title</h2> <p class="issue">(Issue: padding left is not working)</p> </article> </section> <footer> <h1>Footer</h1> <p><b class="issue">(Issue: footer is not at bottom of the page)</b></p> </footer> </body></html>
1 回答
潇潇雨雨
TA贡献1833条经验 获得超4个赞
您可以添加额外的 div 并使其灵活。
页眉宽度：100% 内容右：宽度：50% 内容左：宽度：50% 页脚宽度：100%
<body>
<div class="conteiner">
<header>
<section id="content-right">
<section id="content-left">
<footer>
</div>
</body>
</html>
.conteiner{
display:flex;
flex-wrap: wrap;
}
链接到您的代码： https://codepen.io/Vova_Champion_1/pen/JjdqbLr
- 1 回答
- 0 关注
- 90 浏览
添加回答
举报
0/150
提交
取消