0

PHP を使用して mysql データベースの詳細を表示する Web サイトに取り組んでいます。

スクリプトは、連想配列に格納されているすべての行に対して新しい 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" を持つすべてのスパン要素が右にシフトされ、img とスパンの間にギャップが残ります。そのため、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 に答える