Question

我有一个容器，其宽度可以改变。有了这个容器，我还有其他几个元素：

HTML

<div class="box">
    <div style="float:left" class="sub1">
        VARIABLE SIZE FONT
    </div>
    <div style="float:left" class="sub2">
        CONSTANT WIDTH
    </div>
</div>

<div class="box">
    <div style="float:left" class="sub1">
        VARIABLE SIZE FONT
    </div>
    <div style="float:left" class="sub2">
        CONSTANT WIDTH
    </div>
</div>

在大多数情况下，我不需要对代码执行任何操作，但有时.box div可能更窄。在这些情况下，我需要调整.sub1容器的字体大小。

JS

 $('.sub2').each(function() {
    parentW = $('.sub2').parent().width(),
    sub_2 = $('.sub2').width() + 10,
    sub_1 = $('.sub1').width(),
    availSpace = parentW - sub_2;

    // below is where I need help 
    while (sub_1 > availSpace) {
       curFontSize = $('.sub_1').css('font-size');
       $('.sub_1').css('font-size', parseInt(curFontSize)-2);
    } 
 });

似乎没错，但它似乎对我不起作用。我错过了什么？

Answer 1

您需要在$(this)内使用.each()。此外，您需要访问和修改每个sub1的{{1}} div。

试试这个：

sub2

Answer 2

您是否尝试过更改字体大小值：

    $('.sub_1').css('font-size', '-=2');

通过循环减小字体大小

2 个答案: