Fatal编程技术网
  • html/
  • 两个div在html和CSS中没有水平对齐

两个div在html和CSS中没有水平对齐

html css

两个div在html和CSS中没有水平对齐,html,css,Html,Css,我目前在我的页面上有两个div的问题。它与三个框完美配合，但当使用不同的宽度时，垂直对齐会偏离几个像素 当PHP变量设置为0时，可以看到div框在水平轴和垂直轴上完全对齐。但是当您将PHP变量切换为1时，它们垂直对齐（如果在当前变量下面添加了更多），而不是水平对齐 如何进行设置，使其完全对齐 以下是我的CSS： body { background-color:#FFFFFF; margin:0px; height:100%; } #container { min-heig

我目前在我的页面上有两个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>


NH报告
DSU报告
链接
请尝试以下操作：


div.detailCellContainer3
{
  width:33%;
  display:inline;
}



其中detailCellContainer3是要水平对齐的div类。
好的，您将无法在JSFIDLE中复制该php开关，但我在这里加载了第一个案例的所有内容：

从中我可以看出，
#nhBodyMain
的高度为0，它是从一个祖先元素继承的。所以我认为这里的问题是，在这两个div之上，有些东西没有清除。使用开发工具检查并找出原因。你需要一些东西来澄清你的分歧。可能是这样的（除了使用实际的clearfix——如果你不知道的话，用谷歌搜索它）：



NH-报告菜单
活动
报告1
报告2

请为我们准备好小提琴，并附上一张图片…我已经附上了一张图片，但我无法让小提琴在我的机器上工作。可悲的是，公司设置似乎阻碍了它的功能。我上传了一张图片。现在我明白了确切的问题。请看图片左上角：）35; IE:）不幸的是，IE是组织中的默认设置。因此，这一切都必须考虑到IE。但谢天谢地，一旦为IE开发了合适的浏览器，大多数其他浏览器都会显示良好的性能。谢谢，但当尝试了这一功能后，根本无法修复它。我知道这与不同的容器有关，因为当有三个detailCellContainer3出现在一起时，但是当使用detailCellContainer2和detailCellContainer3时，它们突然变得不对齐。然后检查detailCellContainer2的宽度，并向每个div（包括上面）添加左浮点，使其变得像div.detailCellContainer3{width:33%；display:inline；float:left；}遗憾的是，我尝试过这个方法，但没有任何效果。请参考原始帖子中的“编辑2014-02-13”，其中描述了它与宽度有关，但我不确定如何修复它。我尝试过搜索ClearFix，但谷歌上的多个不同的ClearFix似乎没有修复它。我看不到JSFIDLE，但是根据上面的代码，看起来您已经抓取了主页（PHP中的I=0），它每行包含三个框，但是它们排列得很好。导致问题的一个原因是在使用detailCellContainer2和detailCellContainer3时（因此在PHP中i=1），标题应该是“活动报告菜单”。好的，所以我再次复制了代码，但我显然缺少一些基本样式，因此很难为您完全调试。我在想，与其使用
float
，不如考虑使用
display:inline block
，并确保您的百分比总和不超过100%。我尝试了以下CSS，但仍然超出了这几个像素。detailCellContainer2{/*浮点：左；*/填充：1.6%；宽度：40%；显示：内联；垂直对齐：顶部；}.detailCellContainer3{/*浮点：左；*/填充：1.6%；宽度：20%；显示：内联；垂直对齐：顶部；}Hmmm，在宽度为100%的容器div中包装.detailCellContainer2和.detailCellContainer3如何；显示：块？它们已经包装在一个div（nhBodyMain）中，该div的唯一属性宽度为100%（请参阅上面的问题）。

<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>