左上角将文本对齐浮动图像

时间:2014-12-02 22:31:40

标签: html css twitter-bootstrap twitter-bootstrap-3

我试图弄清楚如何在流体容器中有一个网格元素,其中有一个float: left图像,文本与图像的右上角对齐。我开发了以下bootply以提供可重现的示例:

Bootply Example

<div class="container-fluid">
<div id="page-content" class="application-body-home">
<h1>Heading</h1>
<div id="intro" class="row-fluid">
  <div class="col-lg-12">
    <p align="left">
    <img style:float:="" left;="" src="http://tmacfitness.com/wp-content/uploads/2013/04/Beauty-of-nature-random-4884759-1280-800.jpg" height="200" width"auto"="">
   Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Aenean sed turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, 
  </p>
    </div>

  </div>
  </div>

  <div class="row-fluid">

  <div id:"col1" class="col-md-4"><div class="col-inside">column1</div></div>
  <div id:"col1" class="col-md-4"><div class="col-inside">column2</div></div>
  <div id:"col1" class="col-md-4"><div class="col-inside">column3</div></div>


</div>
</div>

在示例中,我在互联网上找到了一个随机图像,其中段落从左侧浮动图像的右侧中心开始。

由于

1 个答案:

答案 0 :(得分:1)

你的形象是

<img style:float:="" left;=""

应该说

 <img style="float: left;"

这是回答你的问题还是我误解了?