Question

我的页面上有多个angularJS UI网格。显示UI网格后，我需要显示更多细节，这些细节保存在需要显示在网格下方的div中。

请找到以下代码。

<html>
<head>
/*imports here*/
     <style>
           .grid {
                height: 5%;
                width: 100%;
            }
        </style>
         <style>
            #info_div_name {
                width:auto;
                height:auto;
                float:left;
                display: inline-block;
            }

            #info_div_time {
                width:auto;
                height:auto;
                float:right;
                display: inline-block;
            }

            #info_div_note {
                width:inherit;
                height:auto;
                position:static;
                clear:both;
            }
        </style>
        </head>
      <body>

    <div>
         <div ng-controller="MainCtrl" class='inline1' style="width:40%;height: 20%;padding-left: 11px;" id="info_div_name">
            <div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true,
        enableSelectAll: true,
        enableFiltering: true, }" class="executiveSummaryGrid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div> <br>
          </div>
        <div ng-controller="MainCtrl" class='inline1' style="width: 40%;height: 20%;padding-right: 11px;" id="info_div_time">
            <div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true,
        enableSelectAll: true,
        enableFiltering: true, }" class="myGrid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div> <br>
         </div>

        <div ng-controller="MainCtrl" class='inline1' style="width: 40%;height: 20%;padding-left: 11px;" id="info_div_name">
            <div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true,
        enableSelectAll: true,
        enableFiltering: true, }" class="mileStonesGrid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div> <br>
         </div>

    </div> 
    <div style = "background-color:Red;height:50px;width:100px;float:left"></div>
    <div style = "background-color:Blue;height:50px;width:100px;float:left"></div>
    <div style = "background-color:Green;height:50px;width:100px;margin-left:200px"></div>

      </body>

我无法显示在angularJS UI网格下方显示红色，蓝色和绿色的div。

请建议我如何在angularJS UI网格下方的一行中水平对齐最后三个div（显示红色，蓝色和绿色）。

Answer 1

根据评论进行修改：

将divTaglieRighe.Controls添加到绿色div并删除/评论：Request.Form：
在红色div上设置float:left;或margin-left: 200px;。

以下代码段：

clear: left;

<强> ---> External Fiddle here <---

Answer 2

将getBooleanAttributes添加到绿色div并移除float:left;
将margin-left: 200px;添加到红色分区

div的一个在另一个之下的对齐是失败的

2 个答案: