[英]How can I position an elements header in the top right corner of the div at any media size?
我需要幫助讓 header 標題（h2，h3，h4）區域始終出現在各自 div 區域的右上角，無論顯示什么視圖。
另外，header 的內容在我縮小 web 瀏覽器時不斷溢出，我該如何阻止它溢出？
我嘗試移動 header 的邊距和填充，而 header 不會向右移動超過 350px。
我試圖調整 div 的大小以允許 header 移動到右上角。
我應該使用“部分元素”而不是 div 嗎？
我沒有嘗試使用絕對或相對定位。
/********** Base styles **********/ * { font-family: arial, sans-serif, helvetica; font-style: normal; font-size: 16px; box-sizing: border-box; margin: 0; padding: 0; color: rebeccapurple; } h1 { text-align: center; font-size: 175%; margin-bottom: 40px; color: black; } h2, h3, h4 { font-size: 125%; text-align: center; font-weight: bold; border: 1px solid black; max-width: 30%; margin-bottom: 5px; position: relative; bottom: 11px; left: 231px; } h2 { background-color: Pink; color: black; } h3 { background-color: red; color: white; } h4 { background-color: greenyellow; color: black; } div { background-color: lightgray; padding: 10px 0px 10px 10px; border: 1px solid black; margin: 0 auto; margin-bottom: 10px; max-width: 400px; position: relative; } /*Large devices*/ @media (min-width: 992px) {.box1 { float: left; margin-left: 20px; margin-right: 60px; max-width: 30% }.box2 { float: left; max-width: 30%; }.box3 { float: right; max-width: 30%; margin-right: 20px; } h2, h3, h4 { position: relative; left: 70.2%; } } /*Medium devices*/ @media (min-width: 768px) and (max-width:991px) {.box1 { float: left; max-width: 43%; margin-bottom: 30px; margin-left: 40px; margin-right: 0px; }.box2 { float: right; max-width: 43%; margin-bottom: 30px; margin-right: 40px; }.box3 { margin-top: 40px; clear: both; max-width: 100%; margin-left: 40px; margin-right: 40px; } h2, h3, h4 { position: relative; left: 70.2%; } } } /*small devices*/ @media (max-width:767px) { div { margin-top: 30px; } h2, h3, h4 { position: relative; left: 100%; } }
<,DOCTYPE html> <html lang="en-CA"> <head> <meta charset="utf-8"> <title> Our Menu </title> <meta name="viewport" content="width=device-width. initial-scale=1"> <link href="css/STYLE,css" rel="stylesheet" type="text/css"> </head> <body> <h1>Our Menu </h1> <div class="box1"> <h2>Meat</h2> <p id="p1">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> <div class="box2"> <h3>Pizza</h3> <p id="p2">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> <div class="box3"> <h4>Salads</h4> <p id="p3">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> </body> </html>
/********** Base styles **********/ * { font-family: arial, sans-serif, helvetica; font-style: normal; font-size: 16px; box-sizing: border-box; margin: 0; padding: 0; color: rebeccapurple; } h1 { text-align: center; font-size: 175%; margin-bottom: 40px; color: black; } h2, h3, h4 { font-size: 125%; text-align: center; font-weight: bold; border: 1px solid black; max-width: 30%; margin-left: 310px; margin-bottom: 5px; margin-top: 0px; padding: 0px; } h2 { background-color: Pink; color: black; } h3 { background-color: red; color: white; } h4 { background-color: greenyellow; color: black; } div { background-color: lightgray; padding: 10px 0px 10px 10px; border: 1px solid black; margin: 0 auto; margin-bottom: 10px; max-width: 400px; } /*Large devices*/ @media (min-width: 992px) {.box1 { float: left; margin-left: 20px; margin-right: 60px; max-width: 30% }.box2 { float: left; max-width: 30%; }.box3 { float: right; max-width: 30%; margin-right: 20px; } } /*Medium devices*/ @media (min-width: 768px) and (max-width:991px) {.box1 { float: left; max-width: 43%; margin-bottom: 30px; margin-left: 40px; margin-right: 0px; }.box2 { float: right; max-width: 43%; margin-bottom: 30px; margin-right: 40px; }.box3 { margin-top: 40px; clear: both; max-width: 100%; margin-left: 40px; margin-right: 40px; } } /*small devices*/ @media (max-width:767px) { div { margin-top: 30px; } }
<,DOCTYPE html> <html lang="en-CA"> <head> <meta charset="utf-8"> <title> Our Menu </title> <meta name="viewport" content="width=device-width. initial-scale=1"> <link href="css/STYLE,css" rel="stylesheet" type="text/css"> </head> <body> <h1>Our Menu </h1> <div class="box1"> <h2>Meat</h2> <p id="p1">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> <div class="box2"> <h3>Pizza</h3> <p id="p2">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> <div class="box3"> <h4>Salads</h4> <p id="p3">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> </body> </html>
所以，一些事情要 go 結束：
首先，您不需要為相同的分層元素使用不同的標題標簽。 您已經將第一個標題作為您的標題，並且由於您沒有任何后續內容，您可以從那里堅持使用<h2> 。
我們可以使用CSS 特異性來定位您的各種標題，以根據您的喜好更改 colors。 您也可以使用 ID、類來完成此操作，實際上有幾種方法可以處理 CSS 中的任何布局； 這正是我為簡單起見而選擇的。
float非常過時，已被flex-box 技術取代，我們將在菜單項上使用 position 標題。 我們可以使用position屬性嗎？ 當然。 但是如果我們已經在使用 flex，我們可以利用 position 元素的功能，使用container元素來容納所有項目，然后讓項目本身也使用 flex。
我們可以使用align-self: flex-end; 到 position 你的<h2>標簽根據需要然后添加一些邊距給他們一些呼吸空間遠離menuItem s 的邊緣。
這里還有很多事情可以做，但我認為這可以很好地清理它，你會得到一個更簡單、更容易響應的布局，代碼和屬性更少。
希望這涵蓋了一切。 如果您有任何問題，請告訴我。 感謝您在我發表評論后更新您的帖子； 確保在前進時牢記這一點；）
/********** Base styles **********/ * { font-family: arial, sans-serif, helvetica; font-style: normal; font-size: 16px; box-sizing: border-box; margin: 0; padding: 0; color: rebeccapurple; }.container { display: flex; flex-direction: row; background: transparent; width: 100vw; flex-wrap: wrap; gap: 10px; padding: 20px; }.menuItem { display: flex; flex-direction: column; background-color: lightgray; padding: 0px 0px 10px 10px; border: 1px solid black; margin: 0 auto; flex: 1 1 32%; min-width: 400px; } h1 { text-align: center; font-size: 175%; margin-bottom: 40px; color: black; } h2 { font-size: 125%; text-align: center; font-weight: bold; border: 1px solid black; border-top: 0px; border-right: 0px; align-self: flex-end; padding: 5px 20px; }.container.menuItem:nth-child(1) h2 { background-color: Pink; color: black; }.container.menuItem:nth-child(2) h2 { background-color: red; color: white; }.container.menuItem:nth-child(3) h2 { background-color: greenyellow; color: black; }
<,DOCTYPE html> <html lang="en-CA"> <head> <meta charset="utf-8"> <title> Our Menu </title> <meta name="viewport" content="width=device-width. initial-scale=1"> <link href="css/STYLE,css" rel="stylesheet" type="text/css"> </head> <body> <h1>Our Menu </h1> <div class="container"> <div class="menuItem"> <h2>Meat</h2> <p id="p1">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> <div class="menuItem"> <h2>Pizza</h2> <p id="p2">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> <div class="menuItem"> <h2>Salads</h2> <p id="p3">Lorem ipsum dolor sit amet. consectetur adipisicing elit, Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis. t.netur, Doloribus officiis quae facilis, nisi. ex similique, Animi, perferendis</p> </div> </div> </body> </html>
如何在標題的右上角放置“ social-media” div？
[英]how to place the “social-media” div in the top right corner of the header?
我如何獲得 <div> 不論瀏覽器大小如何，始終位於瀏覽器窗口的右上角？
[英]How do I get a <div> to always be in the top right corner of the browser window regardless of browser size?
我可以絕對將元素放在a的右上角 <td> 元件？
[英]Can I absolutely position an element in the top right corner of a <td> element?
如何更改數字時鍾的位置，使其位於網站的右上角？
[英]How can I change the digital clock position so it will be at the top right corner of my website?
我如何在右上角放置一些內容以使該間隙與標題融合在一起？
[英]How can I put something on the top right corner to make that gap blend in with the header?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.