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