我的定位是基于像素,它应该是百分比？
如何在浏览器缩小时让我的元素和图片停止重新缩放,让它像在每个网站附近一样切断？
如何在绝对和相对定位之间进行选择？
这是我的HTML& CSS：
body { Font-family: "CourIEr New",CourIEr,monospace; background: linear-gradIEnt(to bottom,#1D4350,#A43931); background-attachment: scroll; }HTML,body,#wrapper { min-wIDth: 100%; min-height: 100%; }#content { height: 1200px;}.Octagon { color: #2aa186; text-align: center; line-height: 30%; margin-top: 25px;}.LT { text-align: center; color: #3a5454; line-height: 0%; Font-style: italic;}.boi { cursor: pointer; margin-right: 30px; padding: 8px 18px; border: 1px solID #204156; border-color: #52AEC9; color: #52AEC9; position: absolute; top: 8px; right: 16px;}.boi:active { top: 2px;}.iob { cursor: pointer; margin-left: 30px; padding: 8px 18px; border: 1px solID #204156; border-color: #52AEC9; color: #52AEC9; position: absolute; top: 8px;}.boi:active,.iob:active { top: 2px;}#manyarms { position: absolute; margin-top: 30px; margin-left: 31px; wIDth: 310px; height: 250px;}#sensible { position: absolute; margin-top: 30px; margin-right: 31px; wIDth: 310px; height: 250px; right: 10px;}#verr { position: absolute; margin-left: 31px; margin-top: 285px; color: #6458b7;}#special { position: absolute; left: 77.9%; top: 50%; color: #6458b7;}.boi:hover,.iob:hover { text-shadow: 0 0 10px #a193ff;}#footer { padding-left: 95%;} <HTML><head> <Title>The Pragmatic Octopus</Title> <Meta charset="utf-8"/> <link rel='stylesheet' href='style.CSS'/> <script src='script.Js'></script> </head><body><div ID="wrapper"><div ID="header"> <h1 >The Pragmatic Octopus</h1> <p >Lee Townsend</p> <a href="www.Google.com"> <p >Contact</p> </a> <a href="www.Google.com"> <p >information</p> </a></div><div ID="content"> <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" ID="manyarms"> <img src="http://www.wondersList.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" ID="sensible"> <p ID="verr">Here comes a very special boi!</p> <p ID="special">He loves to pose for photos!</p></div><div ID="footer"> © Hecc</div></div></body></HTML>
要么将我的代码修改为所需的代码(我只是看看你做了什么并理解它)或解释我需要做什么.
无论你做什么,谢谢你的阅读和/或协助.
仅应用最小宽度：1000px;对于HTML,#wrapper将不适合你,因为你也使用了绝对定位.要解决此添加位置：相对;到#wrapper.
为什么我们需要增加位置：相对; #wrapper？
绝对定位元素将始终基于具有position：relative;的第一个父元素定位.如果没有这个规则,它将只根据身体定位. (https://developer.mozilla.org/de/docs/Web/CSS/position)
要了解有关位置相对和绝对的更多信息,请参阅：https://css-tricks.com/absolute-positioning-inside-relative-positioning/
通过这些更改,您的网站将在浏览器窗口重新开始时停止扩展.宽度为1000像素. Ofc你可以将1000px更改为你想要的任何宽度.
body { Font-family: "CourIEr New",#A43931); background-attachment: scroll;}HTML,#wrapper { min-wIDth: 1000px; min-height: 100%;}#wrapper { position: relative; /* max-wIDth: 1200px; Edit 1 */}#content { height: 1200px;}.Octagon { color: #2aa186; text-align: center; line-height: 30%; margin-top: 25px;}.LT { text-align: center; color: #3a5454; line-height: 0%; Font-style: italic;}.boi { cursor: pointer; margin-right: 30px; padding: 8px 18px; border: 1px solID #204156; border-color: #52AEC9; color: #52AEC9; position: absolute; top: 8px; right: 16px;}.boi:active { top: 2px;}.iob { cursor: pointer; margin-left: 30px; padding: 8px 18px; border: 1px solID #204156; border-color: #52AEC9; color: #52AEC9; position: absolute; top: 8px;}.boi:active,.iob:active { top: 2px;}/* Edit 2 */#wrapperForTheFirstimage { position: absolute; margin-top: 30px; margin-left: 31px; wIDth: 310px; height: 250px;}#wrapperForTheSecondImage { position: absolute; margin-top: 30px; margin-right: 31px; wIDth: 310px; height: 250px; right: 10px;}/* Removed #manyarms { position: absolute; margin-top: 30px; margin-left: 31px; wIDth: 310px; height: 250px;}#sensible { position: absolute; margin-top: 30px; margin-right: 31px; wIDth: 310px; height: 250px; right: 10px;} */#verr { /*position: absolute; margin-left: 31px; margin-top: 285px;*/ color: #6458b7;}#special { /*position: absolute; left: 77.9%; top: 50%;*/ color: #6458b7;}/* Edit 2 END */.boi:hover,.iob:hover { text-shadow: 0 0 10px #a193ff;}#footer { padding-left: 95%;} <HTML><head> <Title>The Pragmatic Octopus</Title> <Meta charset="utf-8"/> <link rel='stylesheet' href='style.CSS'/> <script src='script.Js'></script> </head><body><div ID="wrapper"><div ID="header"> <h1 >The Pragmatic Octopus</h1> <p >Lee Townsend</p> <a href="www.Google.com"> <p >Contact</p> </a> <a href="www.Google.com"> <p >information</p> </a></div><div ID="content"> <!-- Edit 2 --> <div ID="wrapperForTheFirstimage"> <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~"> <p>Here comes a very special boi!</p> </div> <div ID="wrapperForTheSecondImage"> <img src="http://www.wondersList.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm"> <p>He loves to pose for photos!</p> </div> <!-- Edit 2 END --></div><div ID="footer"> © Hecc</div></div></body></HTML>
编辑1：
为#wrapper添加了max-wIDth以提供一个示例(如果我理解正确的话)：
What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?
编辑2：
我想我现在知道你想要什么.考虑包装你的< img>和< p>在div内部并分别定位div而不是img和p标签.我刚刚更新了源代码以提供示例. (并删除了最大宽度的东西)
总结以上是内存溢出为你收集整理的HTML / CSS定位〜屏幕大小/分辨率和浏览器大小调整全部内容，希望文章能够帮你解决HTML / CSS定位〜屏幕大小/分辨率和浏览器大小调整所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）