logo标签列表

HTML/CSS定位 ～ 屏幕尺寸/分辨率和浏览器调整大小

htmlcss
4

最近我开始对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">
    &copy; Hecc
</div>
</div>
</body>
</html>

要么修改我的代码以满足需求（我会看着你的修改理解它），要么解释我需要做什么。 无论你做什么，感谢你的阅读和/或帮助。

1个回答
1

您可以将 min-width: 100% 更改为 min-width: 1000px;，并应用于 html、body、#wrapper，以将最小页面宽度设置为1000像素。这将使浏览器在窗口宽度低于1000像素时添加滚动条。

仅将 min-width: 1000px; 应用于 html、body、#wrapper 将不起作用，因为您还使用了绝对定位。要解决此问题，请在 #wrapper 中添加 position: relative;。

为什么需要在 #wrapper 中添加 position: relative;？ 绝对定位的元素将始终基于第一个具有 position: relative; 的父级进行定位。如果没有这个规则，则将基于 body 进行定位。(参见https://developer.mozilla.org/de/docs/Web/CSS/position)

要了解有关相对定位和绝对定位的更多信息，请参考https://css-tricks.com/absolute-positioning-inside-relative-positioning/。

通过进行这些更改，您的网站将在浏览器窗口宽度达到<1000px时停止缩放。当然，您可以将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：

将#wrapper添加max-width以提供一个示例，以解决以下问题（如果我理解正确）：

如果有人使用更高像素的屏幕查看此内容，我需要做什么才能实现正确的定位？

编辑2：

我现在知道您想要什么了。考虑将您的<img>和<p>包装在一个

中，并定位该
而不是单独定位img和p标签。 我刚刚更新了源代码以提供一个示例。（并删除了max-width的内容）

1
谢谢，这正是我所需要的。 - user6544947
如果有人使用更高像素的屏幕查看这个页面，我需要做什么来进行适当的定位？ - user6544947
你也可以通过添加 max-width: 1200px; 来为给定元素的宽度添加上限。将其添加到 #wrapper 可能会起作用。我会更新我的答案，以便提供一个示例。 - Tommy Schmidt
当我使用更大的屏幕查看此网站时，某些元素无法到达所需位置，因为它们是基于像素定位的。例如，右侧图像的文本最终会出现在页面的中央，而不是在图像下方。 - user6544947
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接