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 マージンに慣れ、複数の&nbsp;.

他の質問で述べたように、要素 (.menu など) に固定 (最小) 幅を与えて、要素が狭くなりすぎないようにすることができます。

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