Question

标题说明了这一切，但尽管有几次尝试，我实际上无法让它发挥作用。

我正在寻找具有固定高度和最小宽度的DIV，我将在div中显示文本（动态变化），如果任何文本足够长到达DIV的底部我想要的宽度div增加以容纳所有文本。

有CSS解决方案吗？

Answer 1

从我收集的内容来看，这就是我得到的内容

div{
  padding: 20px;
  background-color: wheat;
}

.myDiv {
  height: 100px;
  min-width: 150px;
  overflow: scroll;
}

请您提供您的代码。

Answer 2

好的，所以它不可能在CSS中这样做，所以Javascript是要走的路。

对于其他寻找类似解决方案的人来说，我建立的javascript例程是为了给我提供我需要的功能。

基本上它会检查div是否处于溢出状态，如果是这样，则增加宽度5％的增量，直到溢出解决为止，如果在加载时div不在溢出，则将宽度减小5％，直到找到溢出点为止退后一步。

function changedivsize(){
    widthmin = 35; // in percent
    widthmax = 80; // in percent
    modified = false; // flag to signify when wheve modified the div larger
    while ( $("#quotation").prop('scrollHeight') > $("#quotation").height() ) { // if div is in overflow
        modified = true;                // set flag so we dont start making div smaller in section below
        var widthpixels = $('#quotation').width(); 
        var parentWidth = $('#quotation').offsetParent().width();
        var widthpercent = 100*widthpixels/parentWidth;  // find current width % of div (3lines)
        if (widthpercent < widthmax) {  // if not at limit
            widthpercent = Math.round(widthpercent+5);  // add 5%
            $("#quotation").width(widthpercent+"%");  // change div width
        }else{
            break;  // if we are at limit call it a day
        }   
    } // repeat adding 5% until either we are out of overload or at limit


    while (modified == false){ // basically same as above but reduce div for smaller texts
        var widthpixels = $('#quotation').width();
        var parentWidth = $('#quotation').offsetParent().width();
        var widthpercent = 100*widthpixels/parentWidth;
        if (widthpercent > widthmin) {
            widthpercent = Math.round(widthpercent-5);
            $("#quotation").width(widthpercent+"%");  // change div width
            if ( $("#quotation").prop('scrollHeight') > $("#quotation").height() ){
                widthpercent = widthpercent+5;
                $("#quotation").width(widthpercent+"%");  // change div width
                break;
            }
        }else{
            break;
        }   
    } 
};

Answer 3

这对你需要的东西有用吗？

http://jsfiddle.net/KefJ2/343/

#container { 
   position: relative; /* needed for absolutely positioning #a and #c */ 
   padding: 0; /* will offset for width of #a and #c; and center #b */
   border: green 3px dotted; /* just for the show */   
   float: left; /* To dynamicaly change width according to children */
   height: 300px;
}

#a { 
   white-space: nowrap;
}

CSS div固定高度，最小宽度但扩展内容宽度

3 个答案: