調整大小/放大/縮小頁面時 Div 正在移動
[英]Divs are moving around when resizing/zooming-in/out page
問題描述
如果我設置 position:absolute 它會停止移動和亂亂頁面，同時放大（放大/縮小）頁面。 但是 div 的位置會自動更改，並且所有 div 都在一個位置混合在一起。 有任何想法嗎？ 希望我的問題很清楚。 我找到的所有解決方案都不適合我。 我有我正在制作的這個網站，當我放大和縮小網頁時，div 元素會四處移動。 這是 HTML 代碼和屏幕截圖： Screenshot
<style> /* KEYFRAMES */ /* IDS */ #changepos{ position:relative; top:-250px; } #readmore{ position:relative; top:-260px; right:380px; text-decoration-line:none; border-radius:20px; } #movetext{ position:relative; right:395px; } #wholepage{ width:500px; margin-left:auto; margin-right:auto; } #hello{ position:relative; left:20px; } #hellos{ position:relative; left:100px; } /* Body Visual */ input{ width:50%; overflow:hidden; } main{ background-color:lightgray; min-height: 100%; min-width:100%; background-size:1550px 800px; background-repeat: no-repeat; overflow-x:hidden; } body{ background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80'); min-height: 100%; min-width:100%; background-size:1550px 800px; background-repeat: no-repeat; overflow-wrap:hidden; overflow-x:hidden; } /* Classes */ .typewriter { font-family: Courier, monospace; display: inline-block; } .typewriter-text { display: inline-block; overflow: hidden; letter-spacing: 2px; animation: typing 5s steps(30, end), blink .75s step-end infinite; white-space: nowrap; font-size: 30px; font-weight: 700; border-right: 4px solid orange; box-sizing: border-box; } @keyframes typing { from { width: 0% } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: orange; } } } .forms{ position:relative; left:50px; } .lineh{ border-bottom: 4px solid lightgray; width:1400px; height:3px; cursor:default; position:relative; border-radius:100px; top:-11px; } .lines{ border-bottom: 2px solid none; width:1000px; height:3px; background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg'); cursor:default; position:relative; border-radius:100px; top:-195px; right:400px; } .line{ border-bottom: 2px solid pink; width:1000px; height:3px; background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg'); cursor:default; position:relative; border-radius:100px; } .movepic{ position:relative; left:270px; top: -200px; right:0px; bottom:0px; cursor:default; opacity:1; transition:1s; } .movepic:hover{ transform:translateX(20px); } .joint{ font-family:monospace; font-size:10px; text-decoration-line:none; text-decoration-color:none; text-decoration:none; color:white; } .transp{ position:relative; border-style:solid; border-radius:50px; background-color:none; opacity:0.6; cursor:pointer; border:none; overflow:hidden; transition:1s; border-image-width: 5px; } .transp:hover{ transform:translate(30px); opacity:1; transform-style: preserve-3d; } .container{ text-align: center; margin-top: 360px; } .btn{ border: 1px solid #3498db; background: none; padding: 10px 20px; font-size: 20px; font-family:monospace; cursor: pointer; margin: 10px; transition: 0.8s; position: relative; overflow: hidden; } .btn1,.btn2{ color: #3498db; } .btn3,.btn4{ color: #fff; } .btn1:hover,.btn2:hover{ color: #fff; } .btn3:hover,.btn4:hover{ color: #3498db; } .btn::before{ content: ""; position: absolute; left: 0; width: 100%; height: 0%; background: #3498db; z-index: -1; transition: 0.8s; } .btn1::before,.btn3::before{ top: 0; border-radius: 0 0 50% 50%; } .btn2::before,.btn4::before{ bottom: 0; border-radius: 50% 50% 0 0; } .btn3::before,.btn4::before{ height: 180%; } .btn1:hover::before,.btn2:hover::before{ height: 180%; } .btn3:hover::before,.btn4:hover::before{ height: 0%; } </style>
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roma's Portfolio</title> <link rel="stylesheet" href="../sait/css/main.css"> <link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="refresh" content="350"> <style> .putebi{ width: 100%; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing: border-box; margin-top:6px; margin-bottom:16px; resize:vertical; } .med{ position:relative; outline:none; border-style:none; opacity:0.6; } .med:hover{ opacity:1; } .soc{ animation:socebi 3s; outline:none; border-style:none; } @keyframes socebi{ from{ opacity:0; transform:translateX(-600px); } to{ opacity:1; transform:translateX(0px); } } .kont{ animation: animacia 3s; } @keyframes animacia{ from{ opacity:0; transform:translateX(600px); } to{ opacity:1; transform:translateX(0px); } } </style> </head> <body> <div> <div style="overflow-x:hidden;"id="hello" class="transp"> <a href="index.html"></a> <a href="index.html" class="joint"><h1> Roma's Portfolio</h1> </a> </div> </div> <div class="lineh"></div> <div class="wholepage"> <div style="text-align:center; text-decoration:none"> <a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a> <a style="text-decoration-line:none" class="btn btn1 container">Contact</a> <a style="text-decoration-line:none" class="btn btn1 container">Projects</a> <a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br> <div class="typewriter"> <q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q> </div><br><br> <div style="cursor:default;"class="soc"> <a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br> <a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br> <a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br> </div> <br><br><br> </div> </div> </div> <div id="wholepage"> <div id="movetext" style="color:white; font-family:monospace; font-size:large"> <h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br> <h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3> </div> <div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div> <div class="changepos lines kont"> </div> <button id="readmore" class="btn btn3 kont">Read More</button><br><br> </div> <div style="position:relative; top:-180px"> <form action=""style="text-align:center"> <h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1> <div class="typewriter"> <h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1> </div><br> <label style="font-family:;"for="saxeli">Enter Username</label> <input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br> <label id="email">Enter Email </label> <input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br> <label for="free">Enter Text </label> <textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br> <button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button> </form> <img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg"> </div> </div> <footer> <p style="color:black; ">All Rights Reserved</p> --> </footer> </body> </html>
2 個解決方案
解決方案1
0 2020-11-18 20:32:21
看起來，背景圖片有問題，請嘗試background-size: cover ，如果這也不起作用，請使用任何在線編輯器共享更多代碼
解決方案2
0 2020-11-18 20:49:27
該網站沒有響應，添加媒體查詢以使您的網站在任何設備屏幕尺寸上看起來都不錯（您想要的方式）。
筆記本電腦設置調整網頁大小可將div推離頁面-是否可以通過代碼解決此問題？
[英]Laptop settings resizing web page pushing divs 'off' the page - is there a way around this via code?
通過瀏覽器調整大小來調整，移動和縮放圖像和文本div
[英]Resizing,moving and scaling image and text divs wiith browser resizing
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.