7

次のようなコードがあるとしましょう:

<table>
<tr>
    <td>
        <div id="top">top</div>
        <div id="bot">bottom</div>
    </td>
</tr>
</table>

CSS を使用して #top をセルの上部に、#bot を下部に配置しようとしています。

#top { vertical-align:top; }
#bot { vertical-align:bottom; }

上記は機能していないようです-実際にはまったく効果がないようです。コードへのリンクは次のとおりです: http://jsfiddle.net/vKPG8/28/

なぜこれが起こっているのか、どのように修正できるのかについての説明はありますか?

4

4 に答える 4

7

position: absolute を使用した受け入れられた解決策は、この問題に対するクロスブラウザー互換の解決策ではありません。Firefox は、テーブル セルまたは display:table-cell を使用した要素での絶対配置を許可していないため (仕様によれば、そうすべきではありません)。

この問題を解決する真に信頼できる css のみの方法はないようですが、この場合に機能する css のみの修正があります。基本的に私がしたことは、vertical-align: bottom セットがあるため、テキストの一番下の行を下に強制するのに十分な高さの before 要素を挿入することです。これは基本的に padding-top を配置することと同じであるため、あまり解決策にはなりません。

デモ: http://jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;}
#top { 
    display: inline-block;
    vertical-align:top;
    width: 100%;
}
#bot {
    display: inline-block;
    vertical-align:bottom;
    width: 100%;
}
#bot:before{
    content: '';
    display: inline-block;
    height: 100px;
}
于 2014-01-15T18:33:43.703 に答える
5

vertical-alignはインライン要素用divで、ブロック要素です。position: absoluteと でtop: 0試してくださいbottom: 0。

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }

デモ: http://jsbin.com/iyosac/1/edit
詳細については、こちらを確認してください: http://css-tricks.com/what-is-vertical-align/

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <div id="top">top</div><br/>
        <div id="bot">bottom</div>
      </td>
    </tr>
  </table>
</body>
</html>

于 2013-02-03T08:54:02.717 に答える
3

私はより良い考えを持っています、ネストされたテーブルを使用してください：

<table width="100px" height="100px" border=1>
    <tr>
        <td valign="top">top</td>
    </tr>
    <tr height=100%>
        <td valign="bottom">bottom
        </td>
    </tr>
</table>
于 2014-07-23T08:37:52.260 に答える