HTML中断行无法正常工作

Question

我有一个使用AngularJS开发的应用程序。在其中一个页面中，如果有这样的东西：

String

具有状态，度等的表格大约占屏幕宽度的一半。

我的问题是，通过 <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开始 AFTER 表格？

尝试在中间设置一个宽度为100％的空div，并没有帮助。

有什么想法吗？

谢谢！

Answer 1

您正在使用align="left"属性，这些属性在等效CSS中基本上是float: left;。

根据MDN的float属性，

  

float CSS属性指定一个元素应该从正常流中取出并放在其容器的左侧或右侧，其中text和inline元素将围绕它。

这解释了为什么div[ng-repeat]被推到右边而不是下面。

此问题的一个解决方案是以下列方式在两个浮动div之间放置另一个div：

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

clear:both;所做的是否定float:left的效果，以便其后的任何元素不受float的影响。