Question

我试图将文本和图像并排放置，但文本必须在底部对齐，但没有任何工作，我使用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/

Answer 1

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

将span移至HTML中的图片前
从CSS中的float: right;

span

将display: inline-block;添加到CSS中的span

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试清除浮动。

检查http://jsfiddle.net/w4ucrk2p/

在图片标记

旁边使用此功能

<div style="clear:both"></div>

编辑：

如果您想要图像旁边的文本，请先在<td>内包含span元素，然后再显示图像。像，

http://jsfiddle.net/qr18rLd6/

将文本和图像并排放置，将文本对齐到底部

2 个答案: