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的影响。