html - テーブル内のテキストと画像の位置を揃えます

Question

私は自分のhtmlにこのようなものをマークアップさせています

  <table>
    <tr>
      <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-1.jpg">
        <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
        <a href="#">Add to cart</a>
      </td>
      <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-2.jpg">
        <h3>Battle Field </h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
        <a href="#">Add to cart</a>
      </td>
    </tr>
  </table>

そしてcssはこのようなものです

<style type="text/css">
table tr td {
  vertical-align: top;
  border-collapse: collapse;
  width: 100px;
}
td img {
  padding: 10px;
  border: 1px solid #ccc;
}
td h3 {
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  margin: 0;
}
td span {
  display: inline-block;
  font-size: 12px;
}
td a {
  clear: both;
  display: block;
  vertical-align: bottom;
  margin: 20px 0 0 0;
}
</style>

この後、私のレイアウトは次のようになります

現在のレイアウトはこんな感じ

でもレイアウトはこんな感じにしたい

このタイプのレイアウトが欲しい

私を助けてください。

ノート

テキストの長さの範囲内のタイトルは<h3>...</h3>、製品によって異なる場合があります。したがって、価格はタイトルのすぐ下になり、ボタンは一列に並んでいる必要があります。つまり、2番目の参照画像のようにコンテンツのすぐ下にある必要があります。

score 1 · Accepted Answer

別のボタンを作成<tr>して、ボタンをに移動するだけ<tr>です。

<table>
<tr>
  <td>
    <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="y5g17.png">
    <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
    <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
  </td>
  <td>
    <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="y5g17.png">
    <h3>Battle Field </h3>
    <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
  </td>
</tr>
<tr>
    <td><a href="#">Add to cart</a></td>
    <td><a href="#">Add to cart</a></td>
</tr>
</table>

これは、既存のコードで最も簡単です。

別の方法はdiv's、テーブルの代わりに使用することです。

score 0 · Accepted Answer

簡単な解決策は、コンテンツを複数の行に分割することです。すべての画像が 1 行目に、タイトルが 2 行目に、金額が次の行に、というように表示されます。以下のコードを参照してください。

<table>
<tr>
    <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-1.jpg">
    </td>
    <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-2.jpg">
    </td>
</tr>

<tr>
    <td>
        <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
    </td>
    <td>
        <h3>Battle Field </h3>
    </td>
</tr>

<tr>
    <td>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
    </td>
    <td>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
    </td>
</tr>

<tr>
    <td>
        <a href="#">Add to cart</a>
    </td>
    <td>
        <a href="#">Add to cart</a>
    </td>
</tr>

score 0 · Accepted Answer

.........ライブデモ................

こんにちは、これは css をスローできるようになりました。これで、 2 つの divを作成して、以前positionよりも使用できるようになり、定義できるようになりました。tr height 100%

これでcssを次のように書くことができます

CSS

table tr{
height:100%;
}
table tr td {
  vertical-align: top;
  border-collapse: collapse;
  width: 100px;
  height:100%;
}
td img {
  padding: 10px;
  border: 1px solid #ccc;
}
td h3 {
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  margin: 0;
}
td span {
  display: inline-block;
  font-size: 12px;
}
td a {
  clear: both;
  display: block;
  vertical-align: bottom;
  margin: 20px 0 0 0;
}



.order{
position:relative;
  border:solid 1px red;
  height:100%;
  margin-bottom:20px;
}
.add_to_cart{
background:yellow;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}

HTML

<table>
    <tr>
      <td>
        <div class="order">
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG">
        <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
        <a href="#" class="add_to_cart">Add to cart</a>
          </div>
      </td>
      <td>
        <div class="order">
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG">
        <h3>Battle Field </h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
          <a href="#" class="add_to_cart">Add to cart</a></div>
      </td>
    </tr>


        <tr>
      <td>
        <div class="order">
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG">
        <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
        <a href="#" class="add_to_cart">Add to cart</a>
          </div>
      </td>
      <td>
        <div class="order">
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG">
        <h3>Battle Field </h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
          <a href="#" class="add_to_cart">Add to cart</a></div>
      </td>
    </tr>
  </table>

ライブデモ

html - テーブル内のテキストと画像の位置を揃えます

3 に答える 3

Related

Reference