ДИВ и выравнивание по высоте для всех уровней масштабирования

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/

BTW ... Вы, вероятно, следует рассмотривать делать простую таблицу?

.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 {} 

Edit: с таблицей ... это гораздо проще и zoom работает! Проверьте ссылку на мой комментарий

Answer 2

http://jsfiddle.net/victor_007/8nbyc9m7/3/

* { 
    box-sizing:border-box; 
} 

использование box-sizing:border-box;, который дает border и padding изнутри и установить ширину, какой именно вы хотите

Answer 3

Вот ваше решение. Что я сделал, это исправить таблицу и удалить ширину последней ячейки, чтобы она была гибкой. Я использовал table и tr и td вместо div, так как он сделает ваш css светлее.

Если вы не можете или не хотите, чтобы изменить свою div для table, tr и td, вы всегда можете добавить следующий CSS на вашем div: display: table; заменить table, display: table-row; заменить tr и display: table-cell; заменить td. Результат будет таким же.

.CorpPerformance { 
 
    border: 2px solid gray; 
 
    border-radius: 5px; 
 
    vertical-align: middle; /* it's defined for the whole table so you don't need to write it again */ 
 
    line-height: 30px; 
 
    max-width: 343px; 
 
    border-spacing: 0; /* important for Chrome browser that add spacing */ 
 
} 
 
img { 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
    border: 0; 
 
} 
 
.CorpPerformance > td { 
 
    padding: 0 5px 3px; /* I've just simplified the writing */ 
 
} 
 
.CorpPerformance .DashboardTitle { 
 
    width: 110px; 
 
} 
 
.CorpPerformance .DashboardScore { 
 
    width: 25px; 
 
} 
 
.CorpPerformance .DashboardIcon { 
 
    width: 75px; 
 
} 
 
.CorpPerformance .CvalNational { /* no width anymore */ 
 
    text-align: center; 
 
    border-left: 2px dotted black; 
 
    background-color: gray; 
 
    color: #fff; /* I've remove your span to put the css here, if you can do this it's best to keep html free of css */ 
 
    font-weight: bold; 
 
}

<table class="CorpPerformance"> 
 
    <tr> 
 
    <td class="DashboardTitle">3 Month</td> 
 
    <td 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> 
 
    </td> 
 
    <td 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> 
 
    </td> 
 
    <td class="CvalNational">Test National</td> 
 
    </tr> 
 
</table>