1

私は他の質問を見てきましたが、これに対する解決策を見つけることができません。この画像を考えてみましょう:モックアップ http://img201.imageshack.us/img201/935/image2h.png

div をラップして縦に積み重ねたい。GREEN div は行のラッパーになります。BLUE div には、html ラベルとツールチップのアイコンが含まれます。ORANGE div には、何らかのエントリ (input、select、textarea) が含まれます。

これらのいくつかは、フォームを構成するために垂直に積み重ねられます。私は今これを行っていますが、コンテナ div の高さを指定する必要があり、コンテンツに応じて実際に変更する必要があります。画像やその他のものもここに着陸する可能性があります。

BLUE div に幅が設定されており、ORANGE は float:left です。div の高さを取り除き、コンテンツによって決定するにはどうすればよいですか? より良い方法はありますか？すべてを別のものに変更するのは難しく、すべての要素または何かをスタイルする方法が好まれます。

私が使用しているコードは次のようなものです：

<div class=EntLine>
    <div class=EntLbl>
      <label for="Name">Name</label>
    </div>
    <div class=EntFld>
      <input type=text id="Name" />
    </div>
</div>

CSS は次のようになります。

.EntLine {
  height: 20px;
  position: relative;
  margin-top: 2px;
  text-align: left;
  white-space: nowrap;
}

.EntLbl {
  float: left;
  width: 120px;
  padding: 3px 0px 0px 3px;
  min-width: 120px;
  max-width: 120px;
  vertical-align: text-top;
}

.EntFld {
  float: left;
  height: 20px;
  padding: 0px;
  width: 200px;
}
4

1 に答える 1

1

まず、目的を達成するために使用するマークアップを減らすことができると思います。フォームのすべての要素をラップするのには十分な理由があるかもしれませんが、div各行に単一のラベルと入力のペアを強制するだけの場合は、タグのinput内側にネストできます。label

      <label for="Name">Name
          <input type="text" id="Name" />
      </label>

このようにあなたは簡単なものを使うことができます：

label {display: block; }

各ペアを独自のラインに強制します。これによりfloat、 sの必要性もなくなり、含まれている要素のlabelを指定する必要がなくなります。height

関連するフィールド/ラベルに複数のクラスを適用することもできますが、問題ははるかに少なくなります。私が本当に何かを逃していない限り。

divそれがすべて失敗した場合は、最後のフィールドとスタイルの後に、空の（または他の要素）を追加するだけで済みます。

#empty_element {
disply: block;
height: 0;
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */
visibility: hidden;
}
于 2010-03-17T00:48:50.723 に答える