[英]why does the distance between the divs gets bigger when reducing the viewport width
我正在嘗試通過制作此模板https://www.w3schools.com/w3css/tryw3css_templates_band.htm來練習我的初學者 html 和 CSS 知識，但問題是點擊檢查並減小屏幕寬度以查看我的頁面看起來，我注意到帶有圖片的 div 越來越小（應該按照原始的那個），但是它后面的帶有文本的 div（綠色的那個）離它越來越遠。 有沒有辦法阻止這種情況發生？
PS我用綠色的文本制作了div，只是為了暫時區分它，字體真棒圖標可能不會出現，因為我無法在此處添加相關的CSS文件。
到目前為止，這是我的頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Band</title> <!-- google fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } :root { --main-padding: 20px; } html { scroll-behavior: smooth; } body { font-family: 'Lato', sans-serif; } /* start of nav bar */ nav { background-color: black; color: white; position: fixed; z-index: 99999; width: 100%; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav ul li, nav i { cursor: pointer; padding: 15px 20px; } nav ul li:hover { background-color: lightgray; color: black; } nav ul li:hover a { color: black; } nav ul li a { color: white; text-decoration: none; } .ddmenu { position: relative; } .ddmenu::after { content: ""; position: absolute; border: 5px solid; border-color: white transparent transparent transparent; right: 5px; top: 50%; } .ddmenu:hover::after { border-color: black transparent transparent transparent; } .ddmenu ul { display: none; background-color: white; position: absolute; top: 100%; left: 0; } .ddmenu:hover ul { display: block; } .fa-magnifying-glass:hover { background-color: tomato; } i.fa-bars { display: none; } @media (max-width:600px) { i.fa-magnifying-glass, li:not(.home) { display: none; } i.fa-bars { display: block } i.fa-bars:hover { background-color: lightgray; color: black; } } /* end of nav bar */ /* start of posters */ .posters { padding: 0; color: white; text-align: center; position: relative; margin-top: 48px; margin-bottom: 0; height: 100vh; } .posters .container { position: absolute; top: 0; left: 0; width: 100%; animation-duration: 12s; animation-iteration-count: infinite; } .posters .container:first-of-type { animation-name: la; } @keyframes la { 0% { z-index: 1; } 33% { z-index: 1; } 34% { z-index: 0; } } .posters .container:nth-of-type(2) { animation-name: ny; } @keyframes ny { 0% { z-index: 0; } 33% { z-index: 0; } 34% { z-index: 1; } 67% { z-index: 1; } 68% { z-index: 0; } } .posters .container:last-of-type { animation-name: chicago; } @keyframes chicago { 0% { z-index: 0; } 67% { z-index: 0; } 68% { z-index: 1; } } .posters .container>div { position: relative; height: 100%; } .posters .container>div img { width: 100%; height: inherit; } .posters .container>div .text { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); padding-bottom: var(--main-padding); } .posters .container>div .text h4 { font-size: 25px; font-weight: normal; } .posters .container>div .text p { font-weight: bold; } @media (max-width:600px) { .posters .container>div .text { display: none; } } /* end of posters */ /* start of band */ section#band { padding: var(--main-padding); width: 100%; background-color: green; margin-top: 0; } #band .container { padding: var(--main-padding); width: 70%; margin: auto; background-color: lightgreen; text-align: center; } #band .text h3 { font-size: 30px; font-weight: normal; letter-spacing: 3px; } #band .text p:first-of-type { color: grey; } #band .text p:nth-of-type(2) { text-align: left; } .name { max-width: 100%; display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 20px; padding: var(--main-padding); } .name img { max-width: 90%; } @media (max-width:600px) { .name { flex-direction: column; } } /* end of band */ </style> </head> <body> <!-- Nav Bar --> <nav> <ul> <li class="home"><a href="">HOME</a></li> <li><a href="#band">BAND</a></li> <li><a href="">TOUR</a></li> <li><a href="">CONTACT</a></li> <li class="ddmenu">MORE <ul> <li><a href="">Merchandise</a></li> <li><a href="">Extras</a></li> <li><a href="">Media</a></li> </ul> </li> </ul> <i class="fa-solid fa-magnifying-glass"></i> <i class="fa-solid fa-bars"></i> </nav> <!-- posters --> <section class="posters"> <div class="container"> <div class="la"> <img src="https://www.w3schools.com/w3images/la.jpg" alt=""> <div class="text"> <h4>Los Angeles</h4> <p>We had the best time playing at Venice Beach!</p> </div> </div> </div> <div class="container"> <div class="ny"> <img src="https://www.w3schools.com/w3images/ny.jpg" alt=""> <div class="text"> <h4>New York</h4> <p>The atmosphere in New York is lorem ipsum.</p> </div> </div> </div> <div class="container"> <div class="chicago"> <img src="https://www.w3schools.com/w3images/chicago.jpg" alt=""> <div class="text"> <h4>Chicago</h4> <p>Thank you, Chicago - A night we won't forget.</p> </div> </div> </div> </section> <!-- band info --> <section id="band"> <div class="container"> <div class="text"> <h3>THE BAND</h3> <p><i>We love music</i></p> <p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="name"> <div> <p>Name</p> <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt=""> </div> <div> <p>Name</p> <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt=""> </div> <div> <p>Name</p> <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt=""> </div> </div> </div> </section> </body> </html>
由於絕對定位，這有點奇怪 - 我已經做到了，海報總是 100% 視口高度，並且圖像將覆蓋整個海報 - 你的問題是圖像正在縮小以適應寬度在它下面留下一堆空白空間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Band</title> <!-- google fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } :root { --main-padding: 20px; } html { scroll-behavior: smooth; } body { font-family: 'Lato', sans-serif; } /* start of nav bar */ nav { background-color: black; color: white; position: fixed; z-index: 99999; width: 100%; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav ul li, nav i { cursor: pointer; padding: 15px 20px; } nav ul li:hover { background-color: lightgray; color: black; } nav ul li:hover a { color: black; } nav ul li a { color: white; text-decoration: none; } .ddmenu { position: relative; } .ddmenu::after { content: ""; position: absolute; border: 5px solid; border-color: white transparent transparent transparent; right: 5px; top: 50%; } .ddmenu:hover::after { border-color: black transparent transparent transparent; } .ddmenu ul { display: none; background-color: white; position: absolute; top: 100%; left: 0; } .ddmenu:hover ul { display: block; } .fa-magnifying-glass:hover { background-color: tomato; } i.fa-bars { display: none; } @media (max-width:600px) { i.fa-magnifying-glass, li:not(.home) { display: none; } i.fa-bars { display: block } i.fa-bars:hover { background-color: lightgray; color: black; } } /* end of nav bar */ /* start of posters */ .posters { padding: 0; color: white; text-align: center; position: relative; margin-top: 48px; margin-bottom: 0; height: calc(100vh - 48px); min-height: 300px; } .posters .container { position: absolute; inset: 0; animation-duration: 12s; animation-iteration-count: infinite; } .posters .container:first-of-type { animation-name: la; } @keyframes la { 0% { z-index: 1; } 33% { z-index: 1; } 34% { z-index: 0; } } .posters .container:nth-of-type(2) { animation-name: ny; } @keyframes ny { 0% { z-index: 0; } 33% { z-index: 0; } 34% { z-index: 1; } 67% { z-index: 1; } 68% { z-index: 0; } } .posters .container:last-of-type { animation-name: chicago; } @keyframes chicago { 0% { z-index: 0; } 67% { z-index: 0; } 68% { z-index: 1; } } .posters .container>div { position: relative; height: 100%; overflow: hidden; } .posters .container>div img { min-width: 100%; min-height: 100%; object-fit: cover; position: relative; left: 50%; top: 50%; transform: translate( -50%, -50% ); } .posters .container>div .text { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(calc(var(--main-padding) * -1)); } .posters .container>div .text h4 { font-size: 25px; font-weight: normal; } .posters .container>div .text p { font-weight: bold; } @media (max-width:600px) { .posters .container>div .text { display: none; } } /* end of posters */ /* start of band */ section#band { padding: var(--main-padding); width: 100%; background-color: green; margin-top: 0; } #band .container { padding: var(--main-padding); width: 70%; margin: auto; background-color: lightgreen; text-align: center; } #band .text h3 { font-size: 30px; font-weight: normal; letter-spacing: 3px; } #band .text p:first-of-type { color: grey; } #band .text p:nth-of-type(2) { text-align: left; } .name { max-width: 100%; display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 20px; padding: var(--main-padding); } .name img { max-width: 90%; } @media (max-width:600px) { .name { flex-direction: column; } } /* end of band */ </style> </head> <body> <!-- Nav Bar --> <nav> <ul> <li class="home"><a href="">HOME</a></li> <li><a href="#band">BAND</a></li> <li><a href="">TOUR</a></li> <li><a href="">CONTACT</a></li> <li class="ddmenu">MORE <ul> <li><a href="">Merchandise</a></li> <li><a href="">Extras</a></li> <li><a href="">Media</a></li> </ul> </li> </ul> <i class="fa-solid fa-magnifying-glass"></i> <i class="fa-solid fa-bars"></i> </nav> <!-- posters --> <section class="posters"> <div class="container"> <div class="la"> <img src="https://www.w3schools.com/w3images/la.jpg" alt=""> <div class="text"> <h4>Los Angeles</h4> <p>We had the best time playing at Venice Beach!</p> </div> </div> </div> <div class="container"> <div class="ny"> <img src="https://www.w3schools.com/w3images/ny.jpg" alt=""> <div class="text"> <h4>New York</h4> <p>The atmosphere in New York is lorem ipsum.</p> </div> </div> </div> <div class="container"> <div class="chicago"> <img src="https://www.w3schools.com/w3images/chicago.jpg" alt=""> <div class="text"> <h4>Chicago</h4> <p>Thank you, Chicago - A night we won't forget.</p> </div> </div> </div> </section> <!-- band info --> <section id="band"> <div class="container"> <div class="text"> <h3>THE BAND</h3> <p><i>We love music</i></p> <p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="name"> <div> <p>Name</p> <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt=""> </div> <div> <p>Name</p> <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt=""> </div> <div> <p>Name</p> <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt=""> </div> </div> </div> </section> </body> </html>
當屏幕變小時，為什么div之間的距離會變大，我該如何防止呢？
[英]Why does the gap between to divs get bigger when screen gets smaller and how do I prevent it?
在橫向/縱向視圖之間切換時，移動設備上的視口寬度不會改變-為什么？
[英]Viewport width does not change on mobile devices while switching between landscape/portrait view - why?
當我縮小視口寬度時，為什么 justify-content: center 會失敗？
[英]Why does justify-content: center fail when I narrow the viewport-width?
當視口寬度變小時，標頭中的所有內容都變小。 我該如何改變？
[英]Everything in header gets smaller when viewport width gets smaller. How do I change this?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.