2014-12-02 68 views
-2

我试图找出如何有一个格子元素在液体容器那里是一个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> 

在这个例子中有一个随机图像我与段落开始左侧浮动图像的左右中心在互联网上找到。

感谢

+0

使用垂直对齐:中部;显示:内联块; – 2014-12-02 22:34:42

+0

并始终在问题本身中发布代码。 – 2014-12-02 22:36:29

+0

是这个id分配? id:“col1”=“” – 2014-12-02 22:38:42

回答

1

您的图片说

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

,它应该说

<img style="float: left;" 

是否回答您的问题或已经是我误会?

+0

不完全。我无法将文本对齐到左侧浮动图像的右上角。 – dubbbdan 2014-12-02 22:40:18

+1

是否这样? http://www.bootply.com/B4liSj1p9I – JSilv 2014-12-02 22:42:44

+0

啊哈哈。它是。谢谢! – dubbbdan 2014-12-02 22:43:34