堆栈内存溢出
  简体   繁体   English

垂直调整浏览器大小时如何阻止内容重叠？

[英]How do I stop my content from overlapping when resizing browser vertically?

 原文  2021-09-15 07:22:15  0   3    javascript/ html/ css

问题描述

I'm very new to coding but I decided to make a personal practice website.我对编码很陌生，但我决定制作一个个人练习网站。 My page looks fine on my computer but when I view it on a phone or resize my page vertically, all of my content starts to overlap.我的页面在计算机上看起来不错，但是当我在手机上查看或垂直调整页面大小时，我的所有内容都开始重叠。 How can I prevent it from overlapping?我怎样才能防止它重叠？

I've read that it might be an issue with having position: absolute;我读过这可能是一个问题position: absolute; in my code but I'm not sure how I would replace that.在我的代码中，但我不确定如何替换它。 

 <head> <style> .logo { color: white; font-size: 2em; font-weight: bolder; } a:link { color: white; } a:visited { color: white; } body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; display: block; } .centered { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .logosize { font-size: 2em; letter-spacing: -5px; } .lower-center { position: absolute; top: 55%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); line-height: 18px; text-align: center; } .location-text { font-size: 15px; } footer { text-decoration: none; font-size: 1em; position: absolute; bottom: 0; width: 97%; height: 4rem; display: flex; justify-content: center; } .footer ol { display: flex; list-style: none; } .footer ol li {margin: 1em;} .footer ol li a{ text-decoration: none; } .footer ol li a:hover {color: rgb(83, 54, 150);} </style> </head> <body> <div class="centered logosize"> <p class="logo" id="typewriter">daniel m.</p> </div> <div class="lower-center location-text"> <p><span style='font-size:13px;'>&#128205;</span> las vegas <br>web developer _ creator</p> </div> </body> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer> </html>

3 个解决方案

解决方案1
 0  2021-09-15 07:53:53

First, make sure you have the below lines in the <head> tag:首先，确保<head>标记中有以下几行：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

These enable responsiveness.这些使响应能力。

Then, in the <body> tag:然后，在<body>标签中：

<div class="logosize">
    <span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="lower-center location-text">
    <span>
        <span style='font-size:13px;'>&#128205;</span>
        las vegas
    </span>
    <span>web developer _ creator</span>
</div>
<footer class="footer">
    <ol>
        <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li>
        <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li>
        <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li>
    </ol>
</footer>

Notice, that <footer> should also be in the <body> .请注意， <footer>也应该在<body>中。 The rest code here is same, except that I've removed some unnecessary tags.这里的其余代码是相同的，只是我删除了一些不必要的标签。

And finally changes in the CSS:最后是 CSS 的变化：

body {
  background-color: black;
  color: white;
  font-family: Arial, Helvetica, sans-serif;

  /* Instead of display: block; Add the below lines: */

  height: 100vh; /* So body will have the full screen height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* And the tags inside the body i.e. 2 divs and 1 footer - these will be aligned in a column and will be centered horizontally and vertically */
}

.centered {} /* No need of this */

.lower-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* With this, the 2 span's in this div will be aligned in a column and will be centered horizontally and vertically. */
}

解决方案2
 0 已采纳  2021-09-15 07:55:54

It's better to add all title elements inside the vertically centered <div> to prevent overlap.最好在垂直居中的<div>内添加所有标题元素，以防止重叠。

As you resize the screen, the centered <div> will reposition itself according to the changes made.当您调整屏幕大小时，居中的<div>将根据所做的更改重新定位自己。 But what's inside the <div> will be unchanged.但是<div>里面的内容不会改变。 Think of it like a component or a piece of a puzzle, you structure it as you desire and then the piece responds as a whole to the external changes.把它想象成一个组件或一块拼图，你可以按照自己的意愿构建它，然后这个块作为一个整体响应外部变化。

Try the following snippet:尝试以下代码段： 

 .logo { color: white; font-size: 2em; font-weight: bolder; } a:link { color: white; } a:visited { color: white; } body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; } .centered { display:inline-block; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); text-align:center; } .logosize { font-size: 2em; letter-spacing: -5px; } .lower-center { position: absolute; top: 55%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); line-height: 18px; text-align: center; } .location-text { font-size: 15px; } footer { text-decoration: none; font-size: 1em; position: absolute; bottom: 0; width: 97%; height: 4rem; display: flex; justify-content: center; } .footer ol { display: flex; list-style: none; } .footer ol li {margin: 1em;} .footer ol li a{ text-decoration: none; } .footer ol li a:hover {color: rgb(83, 54, 150);}
 <body style="vertical-align: middle;"> <!--------- centered element --------> <div class="centered"> <div class="logosize"> <span class="logo" id="typewriter">daniel m.</span> </div> <div class="location-text"> <p><span style='font-size:13px;'>&#128205;</span> las vegas <br>web developer _ creator</p> </div> </div> <!-----------------------------------> </body> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer>

解决方案3
 0  2021-09-15 07:59:37

Since you are aware of display: flex I would use that.既然您知道display: flex我会使用它。 It is definitely better than the position absolute approach because items in a flex box will not collide.它绝对比位置绝对方法更好，因为弹性盒子中的项目不会发生碰撞。

Here is the solution I came up with using Flexbox, note a few things:这是我使用 Flexbox 提出的解决方案，请注意以下几点：

  1. the .centered css declaration .centered css 声明
  2. I added a <div class="centered"> around the two divs that originally had a centered class我在最初有一个居中类的两个 div 周围添加了一个<div class="centered">
  3. Just a note: it's best practice to have everything that is visible to the user or a user might interact with (ie Javascript) within the <body> tag, so I moved the <footer> inside the body请注意：最佳做法是在<body>标记中包含用户可见的所有内容或用户可能与（即 Javascript）交互的所有内容，因此我将<footer>移动到正文中

 .logo { color: white; font-size: 2em; font-weight: bolder; } a:link { color: white; } a:visited { color: white; } body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; display: block; } .logosize { font-size: 2em; letter-spacing: -5px; } .centered { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .location-text { font-size: 15px; } footer { text-decoration: none; font-size: 1em; height: 4rem; display: flex; justify-content: center; } .footer ol { display: flex; list-style: none; } .footer ol li {margin: 1em;} .footer ol li a{ text-decoration: none; } .footer ol li a:hover {color: rgb(83, 54, 150);}
 <html> <head> </head> <body> <section class="centered"> <div class="logosize"> <p class="logo" id="typewriter">daniel m.</p> </div> <div class="location-text"> <p><span style='font-size:13px;'>&#128205;</span> las vegas <br>web developer _ creator</p> </div> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer> </section> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 调整浏览器大小时内容重叠 - content overlapping when resizing browser 如何阻止音频重叠？ - How do I stop the audio from overlapping? 如何在调整大小时修复页脚重叠内容 - How to fix footer overlapping content when resizing 如何阻止固定的100％宽度元素重叠浏览器的滚动条？ - How do I stop a fixed, 100% width element from overlapping the browser's scroll-bar? 单击链接后，如何阻止浏览器滚动到顶部？ - How do I stop the browser from scrolling to the top when my link is clicked? 当我调整浏览器大小时，为什么我的 div 会重叠？ - Why are my divs overlapping when im resizing the browser? 如何阻止柔性图像相互重叠？ - How do I stop flex images from overlapping each other? 如何阻止固定侧边栏与 jQuery 重叠页脚？ - How do I stop a fixed sidebar from overlapping the footer with jQuery? CSS-如果用户调整浏览器的大小并水平滚动，如何防止内容div在固定的pos左菜单上重叠？ - CSS - How do I prevent content div from overlapping on a fixed pos left-menu, IF the user resizes the browser and scrolls horizontally? 如何在我的浏览器刷新截止日期后停止执行倒计时计时器 - How do I stop my countdown timer from executing after it has reached the deadline on refresh of my browser
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM