將div與所有其他盒子對齊

嘿，這裏是我的表格，我已經放在每個DIV中。將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/ **

來源

2012-05-29 StealthRT

您可以創建在OP http://jsfiddle.net/ – sandeep

的jsfiddle鏈接的示例。 – StealthRT

給vertical-align:top你的TD。像這樣寫：

td,th { 
    vertical-align:top; 
}

入住這http://jsfiddle.net/RBq3a/4/

來源

2012-05-29 05:04:40 sandeep

嘗試增加position: absolute; top: 0;在箱子（表）的內容。 編輯：表是塊元素，所以我認爲vertical-align:top;是正確的屬性。

來源

2012-05-29 04:17:26

根本不移動盒子。在所有4個盒子中添加** vertical-align：top; **時仍處於相同位置。 – StealthRT

不要將它添加到框中，將它添加到表元素的CSS。 #PackageOne { vertical-align：top; } –

還沒有。 JSFiddle在OP上發佈。 – StealthRT

添加vertical-align:top;給您居中盒裝..

來源

2012-05-29 04:34:42

根本不移動盒子。在所有4個盒子中添加** vertical-align：top; **時仍處於相同位置。 – StealthRT

請與圖像共享工作jsfiddle鏈接。 –

你＃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-29 04:44:41

將div與所有其他盒子對齊

回答

相關問題