0

嘿，这里都是我的表，我为每个表都放在了一个 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>

当第二个表格没有其他表格那么多的文本时，我试图让第二个表格与左右表格对齐。

**继承 JDFiddle 链接：http: //jsfiddle.net/RBq3a/2/ **

4

4 回答 4

4

给vertical-align:top你的TD。像这样写：

td,th {
    vertical-align:top;
}

检查这个http://jsfiddle.net/RBq3a/4/

于 2012-05-29T05:04:40.310 回答
0

尝试添加position: absolute; top: 0;到框（表格）的内容。编辑：表格是块元素，所以我相信vertical-align:top;是正确的属性。

于 2012-05-29T04:17:26.163 回答
0

添加vertical-align:top;到您的中心盒装..

于 2012-05-29T04:34:42.927 回答
0

您的#PackageBG2、#PackageBG2、#PackageBG3、#PackageBG4 具有完全相同的代码，因此应移至 .packageBG 类。对于您的问题，请尝试以下操作：

.packageBG {
  position:relative;
  width:218px;
  display: inline-block; //made your element display inline
  vertical-align: top; //made your element align top
  z-index:10;
  top: 30px;
  bottom: 0;
  margin-left: 5px;
}

将这些属性应用于所有元素

于 2012-05-29T04:44:41.667 回答