如何CSS顯示：表增長權

Question

我正在從事一個網站，涉及顯示使用PHP的MySQL數據庫的詳細信息。

該腳本爲存儲在關聯數組中的每個找到的行動態地創建一個新的div。

輸出的HTML看起來像：

<div class="itembox"> 
<img class="item_img" src="superman.jpg" /> 
<span class="item_text"><strong>Comic Name</strong></span> 
<span class="item_text">Comic Author</span> 
    <span class="item_text">Comic Publisher</span> 
<span class="item_text">$25.00</span> 
<a class="item_text" href="addtocart.html">Add to Cart</a> 
</div> 

，併爲它的CSS：

.itembox 
{ 
background-color:#F2F2F2; 
position:relative; 
top:300px; 
border:solid 1px black; 
width:60%; 
height:60px; 
margin:10px auto; 
display:table; 
table-layout:fixed; 
overflow:hidden; 
} 

.item_img 
{ 
max-height:50px; 
margin:5px 0 5px 5px; 
} 

.item_text 
{ 
position:relative; 
left:30px; 
display:table-cell; 
vertical-align:middle; 
width:19%; 
} 

是我遇到的問題是，如果用戶的會話變量被設置的標籤只顯示（即用戶登錄），所以鏈接不會總是在那裏。當它被移除時，class =「item_text」的所有span元素都向右移動，在img和跨度之間留下間隙。因此，CSS現在放置它的方式，它將鏈接插入右側，並將所有.item_text元素移到左側。有沒有一種方法可以將它固定在左側，並且右側有空白區域，當我需要時會填充空白區域？

不幸的是，我一直沒能找到任何特定的顯示：table或display：table-cell屬性的CSS，讓我改變這一點。另外，向.itembox添加文本對齊：左側被證明什麼也不做。

Answer 1

使用實際的<table>元素。這看起來像表格數據，所以表是合適的：

<table> 
    <tr> 
    <td><img class="item_img" src="superman.jpg" /></td> 
    <td class="item_text"><strong>Comic Name</strong></td> 
    <td class="item_text">Comic Author</td> 
    <td class="item_text">Comic Publisher</Td> 
    <td class="item_text">$25.00</td> 
    <td><a class="item_text" href="addtocart.html">Add to Cart</a></td> 
    </tr> 
</table> 

如果所有的「加入購物車」鏈接出現，只有當用戶登錄時，整列將消失，不需要調整大小。