2014-12-02 73 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