内联块垂直对齐问题
我的页面中有4个框，所有框都有display: inline-block;。问题在于垂直对齐，所有这些框内容都是动态的，因此对于不同的用户，一个框可能比另一个框有更多的行。
请告知我如何避免审计管理框的垂直间隙。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
font-family: 'Arial';
font-size: 12px;
}
a,
a:link,
a:active {
text-decoration: none;
color: blue;
background-color: transparent;
}
a:visited {
color: purple;
background-color: transparent;
}
a:hover,
.ui-state-hover a:hover {
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body style="padding-left:20px;width:70%">
<br/>
<div style="padding-top: 1em;">
<div style="display: inline-block; width: 300px; vertical-align:top; ">
<div>
<div id="id61">
<div>
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="padding: .25em; text-align: center; ">
<label>My Audits Summary</label> (<a href="javascript:;" id="id56">Refresh</a>) </div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: .25em;">
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id57">
<span>Review New Audit Assignment from Audit Liaison (1)</span>
</a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id58">
<span>Assign Audit Analyst to Audit Recommendation Code (1)</span>
</a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id59">
<span>Perform Audit Assignment (8)</span>
</a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id5a">
<span>Review Returned ARP (1)</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: inline-block; width: 350px; vertical-align:top;">
<div>
<div>
<div class="ui-widget ui-corner-all">
<div class="ui-widget-header ui-corner-all">
<div style="padding: .25em;">
<span>Overdue Rec code Actions Summary <span>(<a href="javascript:;" id="id5b">Refresh</a>) </span> </span>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: 5px;">
<div id="id62">
<span>No items found.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: inline-block; width: 100px; vertical-align: top;">
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="text-align: center; padding: .25em;">
<label>Find Audit</label>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div>
<ul style="margin: 0;">
<li>
<a href="javascript:;" id="id35"><span>Rejected</span></a>
</li>
</ul>
<ul style="margin: 0;">
<li>
<a href="javascript:;" id="id36"><span>Pending</span></a>
</li>
</ul>
<ul style="margin: 0;">
<li>
<a href="javascript:;" id="id37"><span>Closed</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="display: inline-block; width: 200px; vertical-align: top;">
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="text-align: center; padding: .25em;">
<label>Reports</label>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: .25em">
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id38"><span>Audit Tracking by Program office Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id39"><span>Audit Tracking Report by FY-Quarter Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3a"><span>Audit Workflow Bottleneck Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3b"><span>Audit Actions Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3c"><span>Stewardship Report 4</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3d"><span>Disallowance Report</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3e"><span>Audit Summary Report by CO and RO</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id3f"><span>Recommendation Code Summary Report by CO and RO</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id40"><span>Recommendation Code Summary Report by Program Office</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="display: inline-block; vertical-align: top; width: 200px; ">
<div>
<div class="ui-widget">
<div class="ui-widget-header ui-corner-all">
<div style="text-align: center; padding: .25em;">
<label>Audit Administration</label>
</div>
</div>
<div class="ui-widget-content ui-corner-all">
<div style="padding: .25em">
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id41"><span>Audit Data Preparation and Processing</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id42"><span>My Monitored Audits</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id43"><span>Audit Logging and Maintenance</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id44"><span>Audit Amendment</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id45"><span>Reset Audit & Assignments</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id46"><span>Archive Audit</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id47"><span>Reassign Official</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id48"><span>Reassign Recommendation Codes</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id49"><span>Grantee Name and Address Maintenance</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4a"><span>Attach Document to Audit</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4b"><span>My Delegated Authority</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4c"><span>Delegate Account Access</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4d"><span>My Open Audits</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4e"><span>Users</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id4f"><span>Program-Organization</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id50"><span>User Assistants</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id51"><span>User Reports</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id52"><span>Batch Reassignments</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id53"><span>Overdue Rec Codes Status Tracking</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id54"><span>Document Library</span></a>
</li>
</ul>
<ul style="margin-bottom: 0;">
<li>
<a href="javascript:;" id="id55"><span>Fac Data</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
2 个答案:
答案 0 :(得分：1)
使用display: inline-block
您可能对columns使用感兴趣：
div {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
div p {
background: red;
color: #fff;
margin: 0 0 20px;
}
答案 1 :(得分：0)
我不确定，但我看不到错误，我认为这是计算机分辨率或显示器尺寸的问题。
我建议你使用bootstrap框架，它非常易于使用，它可以帮助你解决这类问题
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？