html - 在更改字体大小时，所有其他 div 位置都会受到干扰

Question

我遇到了大麻烦，正在寻找相同的解决方法。我有一个网页，其中有标题和正文部分。我在这两个部分都有很多 div。我的问题是，当我更改 div 中任何文本的字体大小时，所有其他 div 的位置都会发生变化。请帮助我。

HTML

<div id="generalHeader">
    <div id="divGeneralLayoutContentHeader">
        <div class="col-md-4 defaultBgColor" id="1">
          <div class="eventBoxShadow">Event Name</div>
        </div>
         <div class="col-md-4 defaultBgColor" id="2">
          <div class="eventBoxShadow">Club Name</div>
        </div>
         <div class="col-md-4 defaultBgColor" id="3">
          <div class="eventBoxShadow">Report Title</div>
        </div>
    </div>
</div>
<div id="generalBody">
    <div id="divGeneralLayoutContentBody">
        <div class="col-md-4 defaultBgColor" id="11">
          <div class="eventBoxShadow">Hdcp Index</div>
        </div>
         <div class="col-md-4 defaultBgColor" id="12">
          <div class="eventBoxShadow">Player Name</div>
        </div>
         <div class="col-md-4 defaultBgColor" id="13">
          <div class="eventBoxShadow">Club Name</div>
        </div>
    </div>
</div>

CSS

.defaultBgColor{
       min-height: 20px !important;
       border: 1px solid lightgray;
       border-radius: 5px;
       background-color: white;
       text-overflow: clip;
       white-space: nowrap;
       overflow: hidden;
    }   

Answer 1

你试过吗

box-sizing:border-box;

属性(property)值(value)？为 CSS 中的所有 DIV 添加此值...

如果不能正常工作，请将您的代码粘贴到 jsfiddle 或任何其他....