3

display:table を使用して、ネストされた行と列のセットのレイアウトを作成しています。テーブルセルの最初の要素がテキスト以外の場合、列の配置が崩れているように見えることに気付きました。確かに、これを引き起こす要素をテストしていませんが、この JSFiddle に例があります: http://jsfiddle.net/ekx4v/

コード：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  #container {
    width:200px;
    height:200px;
    display:table;
  }
  #column1 {
    display:table-cell;
    background-color:blue;
  }
  #column2 {
    display:table-cell;
    background-color:red;
  }
  </style>
</head>
<body>

<div id="container">
  <div id="column1">
    Col1
    <form>
      <select size="2">
        <option>Options go here...</option>
      </select>
    </form>
  </div>
  <div id="column2">Col2</div>
</div>

</body>
</html>

"Col1" テキストを削除すると、2 番目の列が整列しなくなります。これが他のブラウザで再現されない場合のために、Chrome で撮影したスクリーンショットをいくつか示します。

「Col1」の場合:

正しい配置

「Col1」なし:

位置合わせが正しくない

Firefox でも同じ結果が得られます。これは予想される動作ですか？もしそうなら、すべての div の先頭にテキストを配置する必要がないように回避策はありますか?

4

2 に答える 2

5

これはすべてvertical-align、デフォルトの が原因baselineです。サンプルのアルファベットのベースラインが非常に異なるため、これは予想される動作です。実際には、テキスト コンテンツdivがないと にはアルファベットのベースラインがないため、ボックスの下部は仕様に従って親のアルファベットのベースラインに揃えられます。

ありがたいことに、回避策は簡単です。

#container > div {
   vertical-align:top;
}

デモ

ユースケースは少し異なりますが、関連する回答があります（最後のセクションを確認してください）：

簡単に言えば、テキスト コンテンツがない場合、select要素は親のアルファベット ベースラインに揃えられます。これにより、親のアルファベット ベースラインが押し下げられ、selectが親の内側に収まり、下部が親のアルファベット ベースラインに揃えられます。他divのすべての のベースラインは、 によって押し下げられたこのベースラインにまだ調整されていselectます。

form要素の前にテキスト コンテンツを追加divすることで、アルファベット順のベースラインが作成され、親のベースラインをプッシュすることはありませんselect。前のケースと同様に、すべてdivの s のベースラインは依然として親のアルファベット ベースラインに揃えられていますが、今回は親のベースラインは押し下げられていません。

上記の 2 つの段落の大まかなデモを次に示します (狂った MS-Paint スキルに注意してください)。

ここに画像の説明を入力

ご覧のとおり、2 番目のシナリオでは、親のベースラインが押し下げられているため、select要素の下部が親のベースラインに揃えられたまま、要素が親の内側に収まるようになっています。

vertical-align:topブラウザがそのような複雑なルールに従う必要がなくなります。また、フローティング/インラインブロック/テーブル化されたコンテンツに適用するときの多くの頭痛の種から私たちを救うかもしれません.

于 2013-02-26T22:17:32.470 に答える
0

使用することもできます

display:block;
float:left;
height: 200px;

それらの2つのセル。私の経験では、divを上部以外の場所に垂直に配置できるようにすることが、を使用する理由table-cellです。あなたがそれを必要としないならば、あなたが望むことをするより良い方法があるかもしれません。これらをブロックとして表示すると、テキストを内部に表示する方法をより細かく制御できます。

于 2013-02-26T22:22:53.307 に答える