如何防止在浏览器调整大小时div元素移动？

我正在做一个学校工作的网站，但是当我调整屏幕大小并使其更宽一些时，div元素就会离开他们的位置。如何防止在浏览器调整大小时div元素移动？

我该如何预防？

大部分的div是：

.menu { 
    padding-top:120px; 
    position:absolute; 
    color:white; 
    font-size:28pt; 
    font-weight:Bolder; 
}

我的HTML：

<body id="BODY" class="BDNL" onResize="MOSTRA()"> 
    <div id="resizing" class=""> 
    <div id="intro" class="divintro"> 
     <p id="p" class="comeco">Trabalho Interdisciplinar Orientado:</p> 
     <p id="texto" class="txtcomum"> 
     Trabalho no qual um grupo deve elaborar um site que <br /> 
     relacione todas as matérias técnicas estudadas. 
     </p> 
    </div> 
    <form> 
     <div id="menu" class="menu"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <a href="index.html"><label>RECO</label></a> 
     &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
     <a href=""><label>LOCO</label></a> 
     &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
     <a href=""><label> LP1</label></a> 
     &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
     <a href=""><label> LP2</label></a> 
     &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
     <a href=""><label> INFO</label></a> 
     </div> 
    </form> 
    </div> 
</body>

来源

2012-07-11 Victor Bressani de Mello

你可以添加一个HTML代码的样本？ – Sablefoste 2012-07-11 23:20:40

出于好奇，我的答案对你有一点帮助吗？花了一些时间为你编译它，你可能想考虑回过头来看看你的问题，并选择未来的答案或类似的东西，如果你对答案没有反应，你就不会长时间回答问题。 – 2013-05-28 11:28:50

你可能想寻找到CSS的min-width和width性能。

好的。你的HTML看起来很混乱。首先，为了您自己的眼睛，请开始对代码进行修改。

<html> 
    <head> 
     <title>Page title</title> 
    </head> 
    <body class="BDNL" onResize="MOSTRA()"> 
     <div id="resizing"> 
      <div class="menu"> 
       <a href="index.html">RECO</a>| 
       <a href="other.html">LOCO</a>| 
       [--] 
      </div> 
      <div id="intro"> 
       <p> 
        <h1>Trabalho Interdisciplinar Orientado</h1> 
        [..] 
       </p> 
      </div> 
     </div> 
    </body> 
</html>

这是实现您所需结构所需的最小HTML源代码。为什么你在.menu上使用position:absolute;，我想你希望它位于实际内容之上？我将.menu移到#intro容器上方。

使用以下CSS来实现的结果，你可能想：

.menu { 
    margin: 0 0 30px 0; /* bottom margin 30px */ 
} 

.menu a { 
    margin: 0 20px; /* left, right margin 20px; top, bottom 0 */ 
}

而且

请据此决定是否要使用你的元素类或ID，在大多数情况下，你赢了”吨需要两者
摆脱多余的类和ID（<p class="p">或<p id="p">做不有意义），
为您的内容使用propper html元素。使用<h1> - ..标题标题代替不同风格的段落。
让自己熟悉CSS Margins并摆脱多个 。

正如你的其他问题中提到，你可能想给你的元素（例如。菜单）固定（MIN-）宽度防止元素变得太狭隘：

.menu { 
    min-width: 300px; 
}

来源

2012-07-11 23:24:03

如何防止在浏览器调整大小时div元素移动？

回答

相关问题