将文本和图像并排放置，并将文本对齐到底部 [英] putting a text and image side by side with aligning the text to the bottom

问题描述

我试图将文本和图像并排放置，但文本必须在底部对齐，但没有任何工作，即时通讯使用twitter-bootstrap，这是代码：

 < td width =75％style ='padding-top：50px'height =100％> 
 
  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中的图像之前 删除 float：right; 来自 span in CSS


• 添加 display：inline



>

  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％> <跨度>试验< /跨度> < IMG SRC = 数据：图像/ JPEG; BASE64，/ 9J / 4AAQSkZJRgABAQAAAQABAAD / 2wCEAAkGBwwMDQwMDA0MDAwMDAwMDAwMDA8MDAcMFBEWFhQRFBQYHCggGBolJxQUITEhMSkrLi4uFx8zODMsNyg5OjcBCgoKDA0NDwwMDysZFBkrLCsrLCwrLCsrKysrLDcsKysrKys3LCsrKysrKysrKysrKysrKysrKysrKysrKysrK // AABEIAOEA4QMBIgACEQEDEQH / xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH / 8QAFhABAQEAAAAAAAAAAAAAAAAAAAER / 8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC / 8QAFREBAQAAAAAAAAAAAAAAAAAAABH / 2gAMAwEAAhEDEQA / AOI1AbUAAAAABAUAAEUAEUBAUEUARRAUAAAAADAALFQAAARQAABFAQAAABUAFQABQAAAAAAAAFAKgACKgKgoAICoAKIAAAAAAAAACoAACiKAABogCgAAAAAIAAAAAAAgEKAAKAAqACiKAIoAAIqAKAAACAAAAAAAAAIgAoACgCIAKoACgAigCAAoACAgqKlUABABAAAAAAAAAAFAFABBRBRQARUUAAAABKqAACACAAAAAAAAoAIoAAAAAoKiggALQQFAARUAAQAAABAAAAABQARQAABQVFARQEVAFABFAEFQAAABEAFABAAAAAAAAAgCqAAKAIKAAAIoCCgIKgAAAAACIAAAAAKoAAoAgAKACAoAAAAIKAgqAAAAAAAACAAoAACgAACKCKAICgAAAAiooCKgCoAAAAAAAAAAoAAAAAAAAGgACgIAACAqKAAAgoCCgIqACoAAAoAIoAAAAAogCoooIKggAAAIoACKAAAACCgAIAoAAQChQFQVQABFAABBKQAKKAkFAZWACAAAALAAKoDIACgBVAEUFAAH / 9K = 类= IMG响应 宽度=60 ％alt => < / TD> < / table>

Im trying to put a text and an image side by side, but the text have to be aligned at the bottom but nothing is working, im using twitter-bootstrap and this is the code:

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

Thanks.

EDIT: This is what im trying to achieve http://postimg.org/image/ss7u8u6mh/

解决方案

You'll need to make a few changes to HTML and CSS:

• Move span to before the image in HTML
• Remove float: right; from the span in CSS
• Add display: inline-block; to the span in CSS

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>

这篇关于将文本和图像并排放置，并将文本对齐到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！