jQuery, div с фиксированной высотой и минимально возможной шириной

Question

Hejsa!

Я не могу заставить этот пример работать.

http://aspitkbh.dk/lise/intro11/

Коробки должны быть наименьшей возможной ширины. (Чтобы не сломать страницу, пока я жду ответа, я установил для нее ширину. Ниже приведен код, который, как я думал, будет работать.)

EDIT: Я ожидаю, когда ширина «слишком мало», что коробка будет расти слишком высоко. Затем я хочу уменьшить высоту до 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 ... почему бы вам не попробовать свойство max-height и max-width css.

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

И если вы связываете что-то еще, пожалуйста, проигнорируйте это.