Question

嘿，所有这些都是我的桌子，我已经为每个人放置了DIV。

float issue

这个的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/ **

Answer 1

将vertical-align:top提供给您的道明。写得像这样：

td,th {
    vertical-align:top;
}

选中此http://jsfiddle.net/RBq3a/4/

Answer 2

尝试将position: absolute; top: 0;添加到框的内容（表格）中。 编辑：表是块元素，因此我认为vertical-align:top;是正确的属性。

Answer 3

将vertical-align:top;添加到框中心..

Answer 4

您的＃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;
}

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

将div与所有其他框对齐

4 个答案: