Question

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

Answer 1

您可能需要查看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">
使用propper html元素作为您的内容。使用<h1> - ..标记作为标题，而不是使用不同风格的段落。
让自己熟悉CSS Margins并摆脱多个 。

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

.menu {
    min-width: 300px;
}

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

1 个答案: