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的开始在表之后开始？

尝试在两者之间设置一个宽度为 100% 的空div，但没有帮助。

有什么想法吗？

谢谢！

Answer 1

你正在使用align="left"属性，这基本上意味着在等效的CSS中float: left;。

根据 MDN 的浮点属性，

float CSS 属性指定元素应从正常流中获取，并沿其容器的左侧或右侧放置，文本和内联元素将环绕它。

这就解释了为什么您的div[ng-repeat]被推到右侧而不是下方。

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

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

clear:both;所做的是它否定了float:left的影响，因此它之后的任何元素都不会受到float的影响。