html - 为什么我的元素会发生位移？-6ren

html - 为什么我的元素会发生位移？

转载作者：太空宇宙更新时间：2023-11-04 16:16:59

25

4

我制作了一个小型示例网站，我只是想知道:

为什么当我调整窗口大小时我的元素会发生位移？有办法阻止这种情况吗？

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clean Layout Demo</title>
<link href="css/cleanLayout.css" rel="stylesheet" type="text/css" />
</head>
<body><center>
<div id="header">
Famous Quotes
</div><!-- end #header -->
<div id="menu">
<a href="#">Home</a> | <a href="icons.html">Icons</a> 
</div><!-- end #menu -->
<div id="content" style="height:auto;"><br />
Famous Quotes<br /><br /><hr noshade="noshade" /><br />
"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind."<br />
- Dr. Seuss<br /><br /><hr noshade="noshade" /><br />
"A person who never made a mistake, never tried anything new."<br />
- Albert Einstein<br /><br /><hr noshade="noshade" /><br />
"Shoot for the moon.  Even if you miss, you'll land among the stars."<br />
- Brian Litrell<br /><br /><hr noshade="noshade" /><br />
"Obstacles are things a person sees when he takes his eyes off the goal."<br />
- E. Joseph Cossman<br /><br />
</div><!-- end #content -->
</center></body>
</html>

这是主要页面代码

和

这是CSS:

@charset "utf-8";
@font-face {
    font-family: Clean_Layout;
    src:url(../fonts/GeosansLight.ttf)
}

html {
    background-color: #CCC;
}

#header {
    font-family: Clean_Layout;
    font-size:64px;
    text-align:center;
    color:#333;
    background: #999;
    border:2px solid #666;
    border-radius:16px;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    padding-top:22px;
    padding-bottom:0;
    width:600px;
    height:100px;
    margin-bottom:5px;
}

#menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    text-align:center;
    color:#333;
    width:500px;
    background-color:#999;
    border:1px solid #666;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin-top:3px;
    margin-bottom:5px;
    padding-top:1px;
padding-bottom:1px;
}

#menu a:link {
    text-decoration:none;
    color:#333;
}

#menu a:visited {
    color:#333;
}

#menu a:hover {
    color:#222;
}

#menu a:active {
    color:black;
}

#content {
    font-family:Clean_Layout;
    font-size:24px;
    color:#333;
    background: #999;
    border:3px solid #666;
    border-radius:16px;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    width:825px;
    overflow:auto;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:50px;
}

hr {
    width:120px;
    color:#666;
}

希望代码对你有帮助

最佳答案

这是页面的 fiddle :

http://jsfiddle.net/jasongennaro/rFESw/

当页面调整大小时，页面上的元素正在移动，因为您使用了

<body><center>

使页面居中。

但这就是当您的页面流畅时会发生的情况。

如果您希望元素是静态的，您需要给它们 absolute或 fixed职位。

这里有一个不错的定位概述:http://www.alistapart.com/articles/css-positioning-101/

关于html - 为什么我的元素会发生位移？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7292778/

25

4

0

文章推荐： javascript - 足够好的动态对象打包

文章推荐： c++ - 两个类互相使用

文章推荐： html - 制作菜单以使用 box-sizing : border-box

文章推荐： c++ - 没有匹配函数调用 sscanf

Kotlin 位移
如果此答案为 Kotlin，我想转换代码:https://stackoverflow.com/a/5402769/2735398 我将其粘贴到 Intellij 中: private int deco
java - 位移，得到不正确的值
对于这种转变: System.out.println(0b10000000_00000000_00000000_00000001>>>32); 我得到这个输出值: -2147483647 对吗？最佳
r - ggplot中的躲避/位移/排斥轴刻度标签？
如果没有大量工作，我想要的可能是不可能的，但也许有人有解决方案。我有一个像下面这样的图(这当然是一个过于简单的例子)，其中我的刻度标签彼此非常接近: dd <- data.frame(x=1:4, y
go - 位移 << 和乘法 * 优先级
试过这个代码on Go playground : package main import ( "fmt" ) func main() { log2Dim := uint32(9)
ios - 滚动时的 UIScrollview 位移
我希望在用户滚动时获取 UIScrollView 的位移，每次滚动时只需要位移。使用这个方法 -(void)scrollViewWillEndDragging:(UIScrollView *)scro
javascript - iPad 光标在文本区域跳跃(位移)
我正在检查我在装有 iOs 5.1 的 Ipad 中的应用程序当我点击 textarea 时，光标会跳到书写线上方两行。虽然焦点位于正确的位置，但光标的视觉外观出现在焦点线上方两行。对此有任何建议。
c - 位移 x * 数字
你如何获得像 -10 这样的数字？从这些移位练习题中？据我了解X*32可以写成 x> 1 = 0001 0111 >> 1 = 000 1011 = 11 //right bit-shift by
c - 位移 0 的目的是什么
我正在查看适用于 Linux 的开源 AMD GPU 驱动程序。我注意到一些我以前没有见过的东西，我想知道目的。在sid.h文件的第1441行，有一系列的定义是整数被左移0位。这不就是对原始整数进行操
css - 如何修复 Joomla 网站文本迷失方向/位移？
这个网站 localhotchat.com 有文字从红色栏流出。我试过调整它，但它似乎并没有消失。主页(和内部)上的 14pt 文本片段应该在 red_colored_strip 内，但它不是，并且
java - 位移 X 比位移 X 倍快吗？
问题#1 在 Java 中，移位是否比使用单个语句将移位相同数的代价高出数倍？例如，是 int x = 5; x = x << 16; 比快 int x = 5; for (int i=0; i<
css - Google Chrome 中的 Div 位移
我有三个 Div，周围的 Div 是“MainDiv”，里面的 Top Div 是“UpperDiv”下一个是“FooterDiv”。在 Mozilla 中一切正常，但在 Chrome 中“Foot
php - 位移 : Can someone explain what this code does?
所以，我正在阅读一本关于 Go 的书(Ivo Balbaert 的 The Way to Go)，其中有一个代码示例: const hardEight = (1 > 97 因为我没有在这台机器上安装
Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转
Android 平台提供了两类动画。一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。下面就讲一下Tweene Animations。主要类：
ios - iOS 8 中的 UISearchBar - UI 位移
我有 UINavigationItem，我想向它添加 UISearchBar。我是这样做的: let searchBar = UISearchBar(frame: CGRectMake(0, 0, s
Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)
本文实例讲述了Android动画之渐变动画(Tween Animation)。分享给大家供大家参考，具体如下： Android 平台提供了两类动画。一类是Tween动画，就是对场景里的对象不断的
c# - 我应该如何使用 velX,velY 信息来获取当前帧和前一帧之间的 X 和 Y 位移？
我在 C# 中使用 openCV 库中的 Lucas Kanade 光流算法；有一系列帧，我想在每两个帧中找出什么是光流并将其显示在图片框中。我可以从以下函数中获取 velX 和 velY: Emg

首页

博学

6Ren·AI

商城

html - 为什么我的元素会发生位移？