0

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

1 回答 1

3

您可能想查看 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 源代码。你为什么要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">），
  • 为您的内容使用适当的 html 元素。使用<h1>- .. 标签作为标题而不是不同样式的段落。
  • 让自己熟悉CSS Margins并摆脱多个&nbsp;.

正如您在另一个问题中提到的，您可能希望为您的元素（例如.menu）提供一个固定的（最小）宽度，以防止元素变得太窄：

.menu {
    min-width: 300px;
}
于 2012-07-11T23:24:03.063 回答