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

问题描述

当前，我在同一行上有一个段落标题和一个图像，在其右侧:

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>

这很好用-内容标题和图像在同一行上.但是，当我将图像放在内容标题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.

推荐答案

您可以使用float:

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 Bootstrap3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！