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

时间:2012-07-11 23:15:43

标签: html css

我正在为一个学校工作做一个网站,但是当我调整屏幕大小并使其更宽一点时,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>

1 个答案:

答案 0 :(得分:3)

您可能需要查看CSS的min-widthwidth属性。


好。你的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源代码。 为什么您在position:absolute;上使用.menu,我想您希望它位于实际内容之上? 我将.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并摆脱多个&nbsp;

正如您在其他问题中所提到的,您可能希望为元素(例如.menu)提供固定(最小)宽度,以防止元素变得太窄:

.menu {
    min-width: 300px;
}