我试图将文本和图像并排放置,但是文本必须在底部对齐,但是没有任何作用,我使用twitter-bootstrap,这是代码:

<td width="75%" style='padding-top: 50px'  height="100%"  >

     <img src="img/img.png" class="img-responsive "
         style="display:inline-block;margin-left: 10px;float:right;margin-bottom: 40px"
                width="60%" alt="">
     <span style="vertical-align:bottom;float:right">test</span>

</td>


http://jsfiddle.net/zh1o6tuc/

谢谢。

编辑:
这就是我试图实现的http://postimg.org/image/ss7u8u6mh/

最佳答案

您需要对HTML和CSS进行一些更改:


span移到HTML中的图像之前
从CSS中的float: right;删除span
display: inline-block;添加到CSS中的span




img {
  display: inline-block;
  margin-bottom: 40px
  margin-left: 10px;
}
span {
  display: inline-block;
  vertical-align: bottom;
}

<table>
  <tr>
    <td width="75%" style='padding-top: 50px'  height="100%"  >
      <span>test</span>
      <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwwMDQwMDA0MDAwMDAwMDAwMDA8MDAcMFBEWFhQRFBQYHCggGBolJxQUITEhMSkrLi4uFx8zODMsNyg5OjcBCgoKDA0NDwwMDysZFBkrLCsrLCwrLCsrKysrLDcsKysrKys3LCsrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAFhABAQEAAAAAAAAAAAAAAAAAAAER/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAMAwEAAhEDEQA/AOI1AbUAAAAABAUAAEUAEUBAUEUARRAUAAAAADAALFQAAARQAABFAQAAABUAFQABQAAAAAAAAFAKgACKgKgoAICoAKIAAAAAAAAACoAACiKAABogCgAAAAAIAAAAAAAgEKAAKAAqACiKAIoAAIqAKAAACAAAAAAAAAIgAoACgCIAKoACgAigCAAoACAgqKlUABABAAAAAAAAAAFAFABBRBRQARUUAAAABKqAACACAAAAAAAAoAIoAAAAAoKiggALQQFAARUAAQAAABAAAAABQARQAABQVFARQEVAFABFAEFQAAABEAFABAAAAAAAAAgCqAAKAIKAAAIoCCgIKgAAAAACIAAAAAKoAAoAgAKACAoAAAAIKAgqAAAAAAAACAAoAACgAACKCKAICgAAAAiooCKgCoAAAAAAAAAAoAAAAAAAAGgACgIAACAqKAAAgoCCgIqACoAAAoAIoAAAAAogCoooIKggAAAIoACKAAAACCgAIAoAAQChQFQVQABFAABBKQAKKAkFAZWACAAAALAAKoDIACgBVAEUFAAH/9k=" class="img-responsive "  width="60%" alt="">
    </td>
  </tr>
</table>

09-10 10:53
查看更多