html - 所有缩放级别的 div 宽度和高度对齐

Question

HTML代码:

<div class="CorpPerformance">
            <div class="row">
            <div class="DashboardTitle">
                3 Month
            </div>
            <div class="DashboardScore" style="font-weight:bold">
                <a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate="" data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/OFSSurveySummary">950</a>
            </div>
            <div class="DashboardIcon">
<a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES" data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&amp;[OFSP]&amp;[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==">
                        </span></a>            </div>
            <div class="CvalNational">
                <span style="color:#fff;font-weight:bold;">
                National
                </span>
            </div>
            <br>
                </div>
        </div>

JSfiddle 链接:

http://jsfiddle.net/8nbyc9m7/

无缩放输出:

如果我缩放到 110% 或 150% 或 60%，它会给出不同的输出。这意味着最后一部分没有正确对齐。

缩放:

如何在所有浏览器中为所有级别的缩放保持相同的输出。

Answer 1

设置容器的宽度等于父容器的宽度对我来说很有效

http://jsfiddle.net/kursion/8nbyc9m7/2/

顺便说一句......你应该考虑做一个简单的表格？

.CorpPerformance {
padding-left: 5px;           <----------- changed
display: table;
border: 2px solid gray;
border-radius: 5px;
vertical-align: middle;
line-height: 30px;
width: 340px;                <----------- changed
}
.CorpPerformance .DashboardTitle {
width: 80px;                 <----------- changed
}
.CorpPerformance .DashboardScore {
width: 40px;                 <----------- changed
}
.CorpPerformance .DashboardIcon {
width: 100px;                 <----------- changed
}
.CorpPerformance .CvalNational {
width: 119px;                 <----------- changed
text-align: center;
border-left: 1px dotted black;
background-color: gray;
}

80px + 40px + 100px + 119px + 1px(边框)= 340px

然后我删除了填充

.CorpPerformance .row > div {}

编辑:使用表格......它更容易并且缩放有效!检查我评论中的链接