[英]How can I prevent content from overlapping when I resize my browser?
我正在通过 Odin 项目学习 web 开发，目前我被困在登录页面项目上。 我觉得从我使用的模板来看，一切看起来都应该是这样，但我注意到顶部（哈巴狗）的“占位符”图像和最底部的“注册”按钮有重叠。 我做了很多研究，并尝试将显示设置更改为“block”、“inline-block”和 flex。
这也是我的第一个从头开始的项目，所以我知道我的 HTML 和 CSS 非常混乱。 请善待：）我已经为此工作了一个多星期，但我无法弄清楚我做错了什么，我怀疑这可能与我的负利润率有关。 但我不确定。
有人可以告诉我我做错了什么以及如何解决吗？ 这将不胜感激！
这是我的 HTML 和 CSS： https://codepen.io/palmercury/pen/eYExONy
#wrapper{ margin:auto; width:100%; } body{ display:flex; min-height:100vh; }.pics { display: flex; align-items: center; justify-content: center; gap: 52px; margin-bottom:32px; margin-top:32px; }.info { max-width: 100px; }.text{ text-align: center; display:flex; justify-content: space-evenly; }.header, .links, .footer, h1{ background-color:#1f2937; color:#f9faf8; padding:16px; }.header{ padding:16px; margin:auto; }.quote{ font-size: 36px; background-color: #E5E7EB; color: #1f2937; font-style:italic; padding:100px; font-weight:200; }.call-to{ background-color:#3882f6; color:#ffffff; border-radius:12px; margin:80px; padding:32px; gap:16px; display:block; }.call{ display:flex; margin-left:auto; margin-top:-50px; margin-right:300px; border:solid #ffffff; }.signup{ margin-left:40px; text-align: left; } h1{ color:#f9faf8; font-size:48px; font-weight: 900; display:flex; margin:auto; padding-left:150px; } h3{ padding-left:40px; }.subtext{ background-color: #1f2937; color:#ffffff; margin:auto; padding-left:150px; } button{ margin:150px; background-color: #1f2937; } button{ background-color:#3882f6; color:#ffffff; border-radius: 9px; margin-top:16px; margin-bottom:16px; font-weight: 600; }.main-content{ display:block; }.links{ font-size:18px; color: #e5e7eb; display:flex; flex-direction: row; justify-content: flex-end; padding-right:50px; text-decoration: none; }.placeholder{ margin-top:-250px; padding-right:150px; padding-top: -200px; padding-bottom: 100px; background-color:#1f2937; display:flex; justify-content:flex-end; } ul{ list-style-type: none; display:flex; gap:8px; margin-right:50px; padding: 8px; margin-top:-80px; }.random{ font-size: 36px; font-weight:bolder; text-align: center; } a{ text-decoration: none; color:#ffffff; }.footer{ text-align: center; padding:32px; } #wrapper{ display:block; }
<,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>Landing Page</title> <link rel="stylesheet" href="stylish.css"> </head> <body> <div id="wrapper"> <div class="container"> <div class="header"> <h3>Header Logo</h3> </div> <div class="links"> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> </div> <div class="main-content"> <h1>This website is <br> awesome.</h1> <p class="subtext">This website has some subtext that goes here under the <br> main title. It's a smaller font and the color is lower contrast:</p> </div> <button>Sign-Up</button> </div> <div class="placeholder"> <img src="https.//c8.alamy.com/comp/2AT0FHN/cute-pug-dog-walking-in-park-2AT0FHN.jpg" width="400" alt="a pug puggin'"> </div> <div class="middle-content"> <p class="random">Some Random Info</p> </div> <div class="pics"> <div class="info"> <img src="images/images.png" alt = "Catfe Lounge"> <div class="text">This is some subtext under an illustration or image.</div> </div> <div class="info"> <img src="images/images.png" alt = "Catfe Lounge"> <div class="text">This is some subtext under an illustration or image.</div> </div> <div class="info"> <img src="images/images.png" alt = "Catfe Lounge"> <div class="text">This is some subtext under an illustration or image.</div> </div> <div class="info"> <img src="images/images.png" alt = "Catfe Lounge"> <div class="text">This is some subtext under an illustration or image,</div> </div> </div> <div class="quote"> <h2>This is an inspiring quote. or a testimonial from a customer, Maybe it's just filling up space. or maybe will actually read it? Who knows. All I know is that it looks nice:</h2> </div> <div class="call-to"> <h3>Call to Action: It's time.</h3> <p class="signup">Sign up for our product by clicking that button right over there.</p> <button class="call">Sign Up</button> </div> <div class="footer"> Copyright - Palmmercury 2021<BR> Photo Credits? <a href="https.//www.google.com/url?sa=i&url=https%3A%2F%2Fcatfelounge.com%2Fcat-adoption%2F&psig=AOvVaw2i5EK8KpqPOlzrUQPvhGEf&ust=1636500695396000&source=images&cd=vfe&ved=0CAkQjhxqFwoTCIDmnKr2ifQCFQAAAAAdAAAAABAD">Catfe Lounge</a> </div> </div> </body> </html>
将左侧文本和图像包装在单个容器（包装器）中，并应用 display:flex;
从占位符图像中删除边距和填充。
您应该执行以下操作：
<div class="hero">
<div class="text-button-area">
Left content goes here
</div>
<div class="image-area">
<img>Image goes here
</div>
</div>
然后，您可以将 display:flex 应用到 hero 容器。 在此处阅读有关 Flexbox 的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/
一种方法是为body设置一个min-width值，如下所示：
body{
display:flex;
min-height:100vh;
min-width: 1200px;
}
使用CSS时，如何在缩小浏览器时防止DIV重叠？
[英]When using CSS, how can I prevent my DIVs from overlapping when I shrink my browser?
当我调整浏览器的大小时，我的内容不在标题范围内，如何停止此操作？
[英]When I resize my browser my content falls outside of my header how can I stop this?
当浏览器屏幕以自适应布局调整大小时，如何防止当前内容向下移动？
[英]How can I do prevent downward shift of current content when the browser screen resize at responsive layout?
在调整浏览器大小时，如何防止div层重叠？
[英]How do I prevent my div layers from overlapping when the browser is resized?
调整窗口大小时，如何防止所有弹性项目调整大小？
[英]How can I prevent all of my flex-items from resizing when I resize my window?
当他们在浏览器中单击“上一步”时，如何防止内容重新加载？
[英]How can I prevent the content from being reloaded when they click Back on the browser?
调整浏览器窗口大小时，它会覆盖我的幻灯片内容-Bootstrap
[英]When I resize browser window it covers my slideshow content - Bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.