2015年2月24日火曜日

td内でfloatで横並びしたときに表示が崩れる件

td内でfloatで横並びにすると

<table>
<tr>
  <td>test</td>
  <td>
    <div style="float">aaaa</div>
    <div style="float">bbbb</div>
  </td>
<tr>
</table>





のようにtdの位置が下揃えになってしまいます。
ブラウザの幅で折り返しているので、dddの位置が一番高いことになりそこに合わされているためです。

vertical-align:topで上揃えにすることで解消できます。

<table>
<tr>
  <td>test</td>
  <td style="vertical-align:top">
    <div style="float">aaaa</div>
    <div style="float">bbbb</div>
  </td>
<tr>
</table>



0 件のコメント:

コメントを投稿