HTML / CSS定位〜屏幕大小/分辨率和浏览器大小调整
[英]HTML/CSS Positioning ~ Screen Sizes/Resolution & Browser resizing
问题描述
I've taken up interest in HTML/CSS Coding as of late and have run into a problem very quickly that I cant seem to solve or properly understand based on other answered questions similar to mine. 
我最近对HTML / CSS编码感兴趣并且很快就遇到了一个问题，我似乎无法根据类似于我的其他问题解决或正确理解。 My positioning is based off pixels when it should be percent? 我的定位是基于像素，它应该是百分比？ How to get my elements and pictures to stop rescaling as the browser shrinks, have it simply cut off like in near every website? 如何在浏览器缩小时让我的元素和图片停止重新缩放，让它像在每个网站附近一样切断？ How do I choose between Absolute and Relative positioning? 如何在绝对和相对定位之间进行选择？
Here's my HTML&CSS: 这是我的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 class="Octagon">The Pragmatic Octopus</h1> <p class="LT">Lee Townsend</p> <a href="www.google.com"> <p class="boi">Contact</p> </a> <a href="www.google.com"> <p class="iob">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>
Either fix my code to what is desired (I'll just see what you did and understand it) or explain what I need do. 要么将我的代码修改为所需的代码（我只是看看你做了什么并理解它）或解释我需要做什么。 Whatever you do, thank you for reading and/or assisting. 无论你做什么，谢谢你的阅读和/或协助。
1 个解决方案
解决方案1
1 已采纳 2016-07-03 21:12:31
You could change min-width: 100%; 你可以改变最小宽度：100％; to min-width: 1000px; min-width: 1000px; in html, body, #wrapper to set the min page width to 1000px. 在html, body, #wrapper中将最小页面宽度设置为html, body, #wrapper 。 this will make the browser add a scrollbar when the window width is below 1000px. 这将使浏览器在窗口宽度低于1000px时添加滚动条。
Only applying min-width: 1000px; 仅应用min-width: 1000px; to html, body, #wrapper will not work for you since you also used absolute positioning. 对于html, body, #wrapper将不适合你，因为你也使用了绝对定位。 To fix this add position: relative; 要解决此添加position: relative; to #wrapper . 到#wrapper 。
Why do we need to add position: relative; 为什么我们需要增加position: relative; to #wrapper ? #wrapper ？ Absolute positioned elements will always position based on the first parent that has position: relative; 绝对定位元素将始终基于具有position: relative;的第一个父元素position: relative; . 。 If none has this rule, it will just position based on the body. 如果没有这个规则，它将只根据身体定位。 ( https://developer.mozilla.org/de/docs/Web/CSS/position ) （ https://developer.mozilla.org/de/docs/Web/CSS/position ）
To learn more about position relative and absolute refer to: https://css-tricks.com/absolute-positioning-inside-relative-positioning/ 要了解有关位置相对和绝对的更多信息，请参阅： https ： //css-tricks.com/absolute-positioning-inside-relative-positioning/
With those changes being made, your website will stop scaling when the browser window reaces < 1000px in width. 进行这些更改后，当浏览器窗口宽度<1000px时，您的网站将停止缩放。 Ofc you can change the 1000px to any width you want. Ofc你可以将1000px更改为你想要的任何宽度。
body { font-family: "Courier New", Courier, monospace; background: linear-gradient(to bottom, #1D4350 , #A43931); background-attachment: scroll; } html, body, #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 class="Octagon">The Pragmatic Octopus</h1> <p class="LT">Lee Townsend</p> <a href="www.google.com"> <p class="boi">Contact</p> </a> <a href="www.google.com"> <p class="iob">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>
Edit 1: 编辑1：
Added max-width to #wrapper to provide an example for (if i understand correctly): 为#wrapper添加了max-width以提供一个示例（如果我理解正确的话）：
What do I need to do for proper positioning if somebody looks at this with a higher pixel count screen?
Edit 2: 编辑2：
I think i know what u want now. 我想我现在知道你想要什么。 Consider wrapping your <img> and <p> inside a div and position the div and not the img and the p tag separately. 考虑将<img>和<p>包装在div中并分别放置div而不是img和p标签。 I just updated the source to provide an example. 我刚刚更新了源代码以提供示例。 (and removed the max-width thing) （并删除了最大宽度的东西）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.