如何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> 

如果所有的“加入购物车”链接出现，只有当用户登录时，整列将消失，不需要调整大小。