0

我正在一个网站上工作，该网站涉及使用 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 和 span 之间留下一个间隙。因此，CSS 当前的布局方式是将链接插入右侧，并将所有 .item_text 元素向左移动。有没有办法把它固定在左边，右边有空白，当我需要的时候填充？

不幸的是，我找不到任何特定于 CSS 的 display:table 或 display:table-cell 属性的东西，可以让我改变它。此外，将 text-align:left 添加到 .itembox 被证明无济于事。

4

1 回答 1

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>

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

于 2013-05-07T02:27:08.420 回答