将图像对齐到同一行上的文本左边 - Twitter Bootstrap [英] Align image to left of text on same line - Twitter Bootstrap

问题描述

目前我有一个段落标题和一个图像在它的右边，在同一行：

Currently I have a paragraph heading and an image to its right, on the same line:

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

这很好 - 内容标题和图像在同一行。然而，当我把图像放在content-heading div之前，它们不再在同一行。

This works fine - the content-heading and the image are on the same line. However, when I put the image before the content-heading div, they are no longer on the same line. This is what I want to achieve - image then content-heading - on the same line.

推荐答案

你可以使用floating： / p>

You can use floating:

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <img style="float:left" src="../site/img/success32.png"/>
      <div class="content-heading"><h3>Experience &nbsp </h3></div>
      <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

如果您想要以下< p> 也保持在同一行，删除它

If you want the following <p> to stay at the same line too, remove its

style="clear:both"

但您应该添加

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

。

这篇关于将图像对齐到同一行上的文本左边 - Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！