1

次のコード：

<div id="test">
  <table>
    <tbody>
      <tr>
        <td>
          <img src="img1.jpg" />
          <p>Bla bla bla</p>
          <p><a href="#"><img src="img2.jpg"></a></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

およびCSS：

#test td {
    width: 450px;
    height: 220px;
    vertical-align: top;
    border-bottom: 1px solid #000;
    border-right: 50px solid #fff;
}

#test td p {
    margin: 0 0 10px 0;
    width: 290px;
}

#test img {
    padding: 20px 5px 5px 5px;
    float:left;
}

2番目の画像をセルの下部へのリンクに合わせるにはどうすればよいですか？私はたくさんグーグルをしていましたが、どの解決策も私にはうまくいきません...

4

4 に答える 4

1

コンテナ（td）position: relativeと画像、より具体的に<p>は画像を含む画像を指定しposition: absolute; bottom: 0;ます。ここで実際の動作を確認してください。

于 2012-08-31T12:41:58.560 に答える
0

これを試して

<td valign="top">
          <img src="img1.jpg" />
          <p>Bla bla bla</p>
          <p><a href="#"><img src="img2.jpg"></a></p>
        </td>
于 2012-08-31T12:39:16.863 に答える
0

これを試して：

<img src="img1.jpg" />
<p>Bla bla bla</p>
<div class="clearFloat"></div>
<p><a href="#"><img src="img2.jpg"></a></p>

そしてこのCSS：

#test td {
    width: 450px;
    height: 220px;
    vertical-align: top;
    border-bottom: 1px solid #000;
    border-right: 50px solid #fff;
}

#test td p {
    margin: 24px 0 0 0;
    width: 290px;
    float: left;
}

#test img {
    padding: 20px 5px 5px 5px;
    float:left;
}
.clearFloat {
    clear: both;
}

デモ：http：//jsfiddle.net/maWJ2/

于 2012-08-31T12:42:41.527 に答える
0

float:left;から削除#test img

#test img {
    padding: 20px 5px 5px 5px;
}

ライブデモを参照

于 2012-08-31T12:43:23.273 に答える