css - divを他のすべてのボックスの上部に揃えます

Question

ねえ、ここにあるのは、それぞれのDIVに配置したテーブルです。

このためのCSSコードは次のとおりです。

#PackageBG1 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }
    #PackageBG2 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }
    #PackageBG3 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }
    #PackageBG4 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }

ボックスのレイアウトは次のとおりです。

<div id="PackageBG1">
<table id="PackageOne" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="0" rowspan="4">&nbsp;</td>
        <td colspan="3">
            <img src="images/mobileit-design-work-MOBILEITINC3_03.jpg" width="215" height="10" alt=""></td>
        </tr>
    <tr>
        <td style="background-image: url(images/mobileit-design-work-MOBILEITINC3_11.jpg); background-repeat:repeat-y; background-position:left top;" width="3px"></td>
        <td style="background-image: url(images/mobileit-design-work-MOBILEITINC3_12.jpg); background-repeat:no-repeat; background-color:#ececec;">
            <div id="Package">
              <div id="playIcon">
                <img src="images/playIcon_53.png" width="28" height="24" />
              </div>
              <span class="packageTitle">Virtual Desktop</span>
              <span class="packageTitle-sub">Standard Package 1</span>
            </div>
            <div class="packages-text"><p>
              - Enter text here<br>
              - About<br>
              - Pkg<br>
              - Enter text here<br>
              - About<br>
              - Pkg <br>
              - Pkg <br>
              - another<br>
              - and another<br>
              - Pkg <br>
              - another<br>
              - and another<br>
              - another<br>
              - and another<br>              
              - and again
              </p></div>
            <span class="packages-price">$29.95</span><span class="packages-text-bold"> /month</span><br>
            </p>
            <div id="Package-ON"><img src="images/ordernow_55.png" width="133" height="35"></div>        
        </td>
        <td style="background-image: url(images/mobileit-design-work-MOBILEITINC3_13.jpg); background-repeat:repeat-y; background-position:right top;" width="3px"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/mobileit-design-work-MOBILEITINC3_23.jpg" width="215" height="10" alt="">
      </td>
    </tr>
</table>
          </div>

他のテーブルほど多くのテキストがない場合は、2番目のテーブルを左右のテーブルの両方に揃えようとしています。

**ここにJDFiddleリンクがあります：http：//jsfiddle.net/RBq3a/2/ **

Answer 1

vertical-align:topTD に渡します。次のように書きます。

td,th {
    vertical-align:top;
}

これをチェックしてくださいhttp://jsfiddle.net/RBq3a/4/

Answer 2

position: absolute; top: 0;ボックス (テーブル) の内容に追加してみてください。編集:テーブルはブロック要素なのでvertical-align:top;、正しい属性だと思います。

Answer 3

vertical-align:top;中央のボックスに追加..