Question

我最近对HTML / CSS编码很感兴趣并且很快就遇到了一个问题，我似乎无法根据与我类似的其他问题解决或正确理解。我的定位是基于像素，它应该是百分比？如何在浏览器缩小时让我的元素和图片停止重新缩放，让它像在每个网站附近一样切断？如何在绝对和相对定位之间进行选择？

这是我的HTML＆amp; CSS：

＆＃13;

beginSheetModalForWindow(window : NSWindow) { (int) -> Void in
    // Your code 
}

＆＃13;

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%;
}

＆＃13;

将我的代码修改为所需的代码（我只是看看你做了什么并理解它）或解释我需要做什么。无论你做什么，谢谢你的阅读和/或协助。

Answer 1

你可以改变最小宽度：100％; min-width: 1000px;中的html, body, #wrapper将最小页面宽度设置为1000px。这将使浏览器在窗口宽度低于1000px时添加滚动条。

仅将min-width: 1000px;应用于html, body, #wrapper对您无效，因为您还使用了绝对定位。要解决此问题，请将position: relative;添加到#wrapper。

为什么我们需要将position: relative;添加到#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", 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">
    &copy; Hecc
</div>
</div>
</body>
</html>

编辑1：

将max-width添加到#wrapper以提供示例（如果我理解正确的话）：

如果有人看到这个，我需要做些什么才能正确定位具有更高像素数的屏幕？

编辑2：

我想我现在知道你想要什么。考虑将您的<img>和<p>包装在div中并分别放置div而不是img和p标签。我刚刚更新了源代码以提供示例。（并删除了最大宽度的东西）

HTML / CSS定位〜屏幕大小/分辨率＆amp;浏览器调整大小

1 个答案: