我目前在对齐我的页面上的两个 div 时遇到问题。它适用于三个盒子，但当使用不同的宽度时，垂直对齐会偏离几个像素。
当 PHP 变量设置为 0 时，您会看到 div 框在水平轴和垂直轴上完美对齐。但是，当您将 PHP 变量切换为 1 时，它们会垂直对齐(如果在当前变量下方添加了更多)，但不会水平对齐。
如何设置才能使它们完美对齐？
下面是我的 CSS:
body {
background-color:#FFFFFF;
margin:0px;
height:100%;
}
#container {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -50px;
overflow:hidden;
}
#nhHeader {
background-color:#215967;
width:100%;
}
#headerTitle {
float:left;
padding-left:5.5em;
color:#FFFFFF;
}
#headerLinks {
float:right;
padding-right:1.5em;
text-align:right;
vertical-align:middle;
}
#nhBody {
height:100%;
width:100%;
}
#nhBodyHeader {
float:left;
padding-left:1em;
display: table;
width:100%;
}
#nhBodyMain {
width:100%;
}
span.nhBodyHeaderText, span.nhBodyHeaderImage {
vertical-align: middle;
display: table-cell;
}
span.nhBodyHeaderText {
font-size:large;
font-weight:bold;
}
.detailCellContainer2 {
float:left;
padding:1.6%;
width:63%;
}
.detailCellContainer3 {
float:left;
padding:1.6%;
width:33%;
}
.detailCell1Header, .detailCell2Header {
color:#FFFFFF;
font-size:1.5em;
width:100%;
}
.detailCell1Header {
background-color:#93CDDD;
}
.detailCell2Header {
background-color:#215968;
}
.detailCellHeaderText {
padding:0.5em;
}
.detailCellMainText {
background-color:#DBEEF4;
padding:1em;
}
下面是我的 HTML/PHP:
<html>
<head>
<title>NH Reporting</title>
<link rel='stylesheet' type='text/css' href='nh.css'>
</head>
<body>
<div id='container'>
<div id='nhHeader'>
<div id='headerTitle'>
DSU Reporting
</div>
<div id='headerLinks'>
Links
</div>
</div>
<div id='nhBody'>
<?php
$i = 1;
switch ($i) {
case 0:
//For Main:
echo "<div id='nhBodyHeader'><span class='nhBodyHeaderImage'><img src='images/NHLogo.png'></span><span class='nhBodyHeaderText'>NH - Reporting Menu</span></div>";
echo "<div id='nhBodyMain'>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Activity</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Financials</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Organisation</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Workforce</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Quality</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCell2header'><div class='detailCellHeaderText'>My Recent Reports</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "</div>";
break;
case 1:
//For Drill-down
echo "<div id='nhBodyHeader'><span class='nhBodyHeaderImage'><img src='images/NHLogo.png'></span><span class='nhBodyHeaderText'>Activity Reporting Menu</span></div>";
echo "<div id='nhBodyMain'>";
echo "<div class='detailCellContainer2'>";
echo "<div class='detailCellContainer1'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Workforce</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "</div>";
echo "<div class='detailCellContainer3'>";
echo "<div class='detailCellContainer1'>";
echo "<div class='detailCell1header'><div class='detailCellHeaderText'>Favourites</div></div>";
echo "<div class='detailCellMainText'>Report 1<br>Report 2</div>";
echo "</div>";
echo "</div>";
echo "</div>";
break;
case 2:
//For Reports:
echo "<iframe src='http://www.linkhere.com.au/reportXYZ' frameborder=0 height='100%' width='100%'></iframe>";
break;
}
?>
</div>
</div>
</body>
</html>
问题来了:
2014 年 2 月 13 日编辑: 在进一步挖掘之后，我发现它与 detailCellContainer2 和 detailCellContainer3 的宽度百分比有关。我不太确定如何解决它，但如果百分比相同，它们将显示在同一级别，如果百分比不同，则较小的百分比显示为高于较大的百分比(百分比之间的差异越大对齐的差异越大)。
最佳答案
好吧，你将无法在 JSFiddle 中重现那个 php 开关，但我在第一个案例中将所有内容加载到这里:JSFiddle
由此我可以看出 #nhBodyMain 的高度为 0，这是从祖先元素继承而来的。所以我认为这里的问题是两个 div 上方没有清除某些东西。使用开发工具检查并找出原因。你需要在你的 div 之间清除一些东西。也许是这样的(除了使用实际的 clearfix——如果你不知道的话谷歌它):
<div id="nhBodyHeader"><span class="nhBodyHeaderImage"><img src="images/NHLogo.png">
</span><span class="nhBodyHeaderText">NH - Reporting Menu</span></div>
<div id="nhBodyMain">
<div class="detailCellContainer3">
<div class="detailCell1header"><div class="detailCellHeaderText">Activity</div></div>
<div class="detailCellMainText">Report 1<br>Report 2</div>
</div>
关于html - 两个 div 在 html 和 CSS 中没有水平对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21719680/