HTML斷線不按需要工作

Question

我有一個使用AngularJS開發的應用程序。在其中一頁中，如果有這樣的內容：

<h1 align="left">Name: <strong>{{View_This_Person.Name}}</strong></h1> 

    <div style="width:100%"> 
     <table align="left"> 
      <tbody style="width:100%"> 
       <tr> 
        <td><font size="5">Status</font></td> 
        <td><font size="5">&nbsp : &nbsp</font></td> 
        <td><font size="5"><strong>{{View_This_Person.Status}}</strong></font></td> 
       </tr> 
       <tr> 
        <td><font size="5">Degree</font></td> 
        <td><font size="5">&nbsp : &nbsp</font></td> 
        <td><font size="5"><strong>{{View_This_Person.Degree}}</strong></font></td> 
       </tr> 
       <tr> 
        <td><font size="5">Address</font></td> 
        <td><font size="5">&nbsp : &nbsp</font></td> 
        <td><font size="5"><strong>{{View_This_Person.Address}}</strong></font></td> 
       </tr> 
       <tr> 
        <td><font size="5">Phone</font></td> 
        <td><font size="5">&nbsp : &nbsp</font></td> 
        <td><font size="5"><strong>{{View_This_Person.Phone}}</strong></font></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

    <div ng-repeat="One_Article in Articles_Results.Date track by One_Article.ISBN"> 
    ... 
    </div> 

帶有狀態，度數等的表佔用大約一半的屏幕寬度。

我的問題是，通過ng-repeat生成的下一個內容從表格右邊開始，而不是下邊。

使用<br>只是移動ng-repear開始一條線下來，所以我需要把幾個<br>'s得到它的權利，這將導致一個醜陋的顯示器，因爲表的高度是不固定的，而當用戶隨應用程序的寬度而改變......好吧，不需要再多說明了。

問題是，我該如何強制開始ng-repeat開始AFTER表？

試圖設置一個空白div與寬度爲100％之間，並沒有幫助。

任何想法？

謝謝！

Answer 1

您正在使用align="left"屬性，這基本上意味着float: left;在等效的CSS。

根據MDN的float屬性，

浮子CSS屬性指定的元素應該從正常流中取出並沿着它的容器，其中文本和內聯元素的左側或右側放置將圍繞它。

這解釋了爲什麼您的div[ng-repeat]被推向右邊而不是下面。

一個解決這個問題的是把另一個div在中間的兩個浮動的div下列方式：

<div style="clear:both;"></div> 

做什麼clear:both;的是，它否定了float:left的作用，因此，它後面的任何元素不受float的影響。