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

Question

我在一个句子中单独显示每个字div使用inline-block带max-width的120px.当我尝试增加父div上的字体大小时,由于字体较大,div的内联块会重叠.

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

以下是示例代码段:

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相互重叠.我希望通过计算来解决这个问题,以便在增加font-size后max-width根据初始大小获得确切的比例120px.

Answer 1

我想我已经找到解决办法了。从未想过它会像仅使用span内部子元素div在增加字体大小后获取元素宽度一样简单。然后max-width用宽度值替换子 div span。它会根据您增加 font-size 后max-width的初始值给出准确的比例120px，同时还要注意包裹 div，以防它超过 的宽度parentDiv。

这是代码片段：

jQuery('.btnIncFont').click(function() {
  jQuery('.parentDiv').css('font-size', parseInt(jQuery('.parentDiv').css('font-size')) + 2);
  var spanWidth = parseInt(jQuery('.parentDiv div span').css('width'));
  jQuery('.parentDiv div').css('max-width', ((spanWidth < 120)?120:spanWidth) + 'px');
});

<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"><span>This is a test1</span>
  </div>
  <div style="display:inline-block;max-width:120px"><span>This is a test2</span>
  </div>
  <div style="display:inline-block;max-width:120px"><span>This is a test3</span>
  </div>
  <div style="display:inline-block;max-width:120px"><span>This is a test4</span>
  </div>
</div>