Question

海萨！

我无法让这个例子起作用。

这些盒子应该是尽可能小的宽度。（为了在我等待回答时不打破页面，我已经将宽度设置为自动。下面是我认为可以使用的代码。）

编辑：我预计当宽度“太小”时，盒子会变得太高。然后我想减小高度，直到170.盒子太高或太宽，因为里面有“太多”的文字。

<div class="myBoxExercise box1">Se en demo.
<button type="button" class="myButton" onclick="colorMe(this)">OK</button>
</div>
<div class="noMoreBox"></div>
<h3>Opgave 2</h3>
<div class="myBoxExercise box1">Du bliver.
<button type="button" class="myButton" onclick="colorMe(this)">OK</button>
</div>

.myBoxExercise {
    height: 170px;
    width: 100px;
    padding: 5px;
    float: left;
    margin: 5px;
    border-radius: 10px;
}


// JavaScript Document
// http://stackoverflow.com/questions/15227350/full-height-content-with-the-smallest-possible-width
$(document).ready(function() {
    $( "div.myBoxExercise" ).each(function( index ) {
        // The 160 = 170-2*5 is because you have to subtract the container padding and the element's own padding
        // Or not?
        while($(this).height() > 190) {
            currentWidth = $(this).width();
            $(this).width(currentWidth + 1);    
        }
        console.log( index + ": " + $( this ).width() );
    });
});

Answer 1

找到解决问题的方法。

我把css更改为：

.myBoxExercise {
    width: 50px;
    padding: 5px;
    float: left;
    margin: 5px;
    border-radius: 10px;
}

结束了这个js：

$( "div.myBoxExercise" ).each(function( index ) {
    while($(this).height() > 170) {
        currentWidth = $(this).width();
        $(this).width(currentWidth + 1);    
    }
    $(this).height(170);
    if ($(this).width() < 150) {
        $(this).width(150);
    }
});

它几乎是我现在想要的。评论对我有帮助。感谢。

Answer 2

如果您尝试将div.myBoxExercise高度设置为不大于170且宽度不应大于150 ...为什么不尝试使用css max-height和max-width属性。

 div.myBoxExercise{max-height:170px;max-width:150px;}

如果你想要别的东西，请忽略它。

jQuery，具有固定高度和最小可能宽度的div

2 个答案: