由於沒有設置寬度，在浮動元素的文本中不會發生包裝

我正在使用twitter-bootstrap.css和angularjs開發一個響應式移動網頁。由於沒有設置寬度，在浮動元素的文本中不會發生包裝

我想在一行中使用float concepts.see屏幕截圖在一行中容納一個圖像和文本。

我給寬度圖像和我沒有對文本給寬度，因爲我想借此由圖像冷落的剩餘寬度的文字，

但情況並非如此，文本來下一行，而不是將文本包含在圖像剩餘的可用寬度中，當文本大於寬度時。

屏幕截圖＃1

當文本包含在圖像冷落的寬度，當文本內容的寬度小於由圖像冷落可用寬度內。

(Link to the full image)

屏幕截圖＃2

當文本涉及到新的生產線，而不是通過圖像，當文本內容的寬度大於冷落的寬度內包裝可用寬度漏掉由圖像

(Link to the full image)

屏幕截圖＃3

因爲我需要，當短信來的圖像，當文本內容的寬度比由圖像冷落可用寬度更留出了寬度內包裝。但寬度設置爲文本。

(Link to the full image)

我的代碼是

<html lang="en" ng-app> 
    <head> 
     <meta charset="utf-8"> 
     <title>My HTML File</title> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
     <link rel="stylesheet" href="css/bootstrap-responsive.css"> 
     <style> 
      .float-left {float:left !important;} 
      .clearIt {clear:both !important;} 
      .marRight5{margin-right:5px} 
      .BgImg{background: url(images/img.png) no-repeat;height:25px;width:25px} 
     </style> 

     <script src="lib/angular/angular.js"></script> 


    </head> 
    <body> 
     <div class="row-fluid"> 
      <div class="BgImg float-left marRight5"></div> 
      <div class=" float-left">This is test content This is test content This is test content This is test content This is test content</div> 
      <div class="clear"></div> 
     </div> 

    </body> 
</html>

來源

2013-04-25 Mohamed Hussain

取浮離你的文字股利。浮動元素不會纏繞其他浮動物，它們會以塊的形式浮動在其周圍，如果需要，可以將其包裹到新線。

http://jsfiddle.net/isherwood/jP6yd/

<div class="row-fluid"> 
    <div class="BgImg float-left marRight5"></div> 
    <div>This is test content This is test content This is test content This is test content This is test content</div> 
    <div class="clear"></div> 
</div>

來源

2013-04-25 19:31:56 isherwood

感謝您的回答。但文字在圖像高度結束後出現新的線條。 – 2013-04-26 11:43:52

看到這個小提琴http://jsfiddle.net/shmdhussain/A8rL7/問題重新創建。 – 2013-04-26 11:53:47

你的小提琴在文字上仍然有浮動。我假設你已經接受了我的答案，你已經意識到了這一點。 – isherwood 2013-04-26 15:48:03

由於沒有設置寬度，在浮動元素的文本中不會發生包裝

回答

相關問題