我想要有一個如圖所示的布局結構，其中“標題”文本在中心對齊，鏈接在右側對齊，在左列中我有一些文本，在每個文本下方，有一個在中心對齊的圖像：但它無法正常工作，我試圖獲得這樣的布局“ 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 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消