javascript - 字体大小更改时动态调整容器大小

Question

我在单独的 div 中显示句子中的每个单词，使用 inline-block 和 max-width 为 120px。当我尝试增加父 div 的字体大小时，由于字体大，我的 div 内联 block 重叠。

有没有办法以编程方式计算增加字体大小后要使用的 div 的内联 block 所需的 max-width？

这是示例代码片段:

jQuery('.btnIncFont').click(function(){
  jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
  <div style="display:inline-block;max-width:120px">This is a test1</div>
  <div style="display:inline-block;max-width:120px">This is a test2</div>
  <div style="display:inline-block;max-width:120px">This is a test3</div>
  <div style="display:inline-block;max-width:120px">This is a test4</div>
</div>

一直按着+键，在某个阶段你会发现div互相重叠了。我想通过计算我的 max-width 来解决这个问题，以便在增加字体大小后根据初始大小 120px 获得准确的比例。

Answer 1

当您增加字体大小时，请确保您也增加了行高。

我认为您不想继续以编程方式设置每个 div 的宽度，让 CSS 为您完成。我假设您还没有这样做，如果是这样，请尝试将其设置为自动。最后，我可能更适合你。

很抱歉回答含糊不清，但如果您发布代码，我会给您一个更具体的答案。