我想要有一個(gè)如圖所示的布局結(jié)構(gòu)，其中“標(biāo)題”文本在中心對(duì)齊，鏈接在右側(cè)對(duì)齊，在左列中我有一些文本，在每個(gè)文本下方，有一個(gè)在中心對(duì)齊的圖像：但它無(wú)法正常工作，我試圖獲得這樣的布局“ https://jsfiddle.net/e2gvbjyq ”，但有 3 個(gè)問(wèn)題：鏈接“鏈接”未與“標(biāo)題”文本正確垂直對(duì)齊，且未正確右對(duì)齊左列中的圖像沒(méi)有像上圖那樣在中心對(duì)齊右列中的對(duì)該padding:1em列沒(méi)有任何影響頁(yè)腳不會(huì)像上圖那樣出現(xiàn)在底部你知道為什么嗎？我是初學(xué)者，所以我嘗試使用 margin、float 等基礎(chǔ)知識(shí)來(lái)實(shí)現(xiàn)這種布局。超文本標(biāo)記語(yǔ)言 <!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>
為什么布局沒(méi)有像圖像中那樣顯示？
至尊寶的傳說(shuō)
2023-10-30 16:08:52
