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和spans之间留下间隙。因此CSS当前的方式就是它，它将链接向右移动并将所有.item_text元素移到左侧。有没有办法让它已经固定在左侧并且右侧有空白区域，这在我需要时填充？

不幸的是我无法找到显示的任何特定内容：table或display：CSS的table-cell属性让我改变它。此外，将text-align：left添加到.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>

如果仅在用户登录时才显示所有“添加到购物车”链接，则整个列将消失，无需调整大小。

如何CSS显示：表格增长正确

1 个答案: