我的页面上有多个 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(显示红色、蓝色和绿色)。
最佳答案
根据评论编辑:
- 添加
float:left;到绿色 div 并删除/注释:margin-left: 200px;: - 在红色 div 上设置
clear: left;或clear: both;。
下面的片段:
<div style = "background-color:Red;height:50px;width:100px;float:left;clear:both;"></div>
<div style = "background-color:Blue;height:50px;width:100px;float:left"></div>
<div style = "background-color:Green;height:50px;width:100px;float:left"></div>
---> External Fiddle here <---
关于html - div 的一个低于另一个的对齐失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41988122/