如何使用CSS縮小父容器縮小

我有CSS問題，我找不出來。這是標記。如何使用CSS縮小父容器縮小

<!doctype html> 

<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <style type="text/css"> 
      .container { position: relative; background-color: purple; padding: 0; margin: 0; } 
      .first { float: left; width: 10%; min-width: 100px; background-color: yellow; } 
      .second { float: left; width: 10%; min-width: 100px; background-color: orange; } 
      .third { float: left; width: 80%; background-color: lime; } 
      .clear { clear: both; } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="first">first</div> 
      <div class="second">second</div> 
      <div class="third">third</div> 
      <div class="clear"></div> 
     </div> 
    </body> 
</hmtl>

我遇到的問題是，我想換行第三格，當我縮小瀏覽器窗口，但它完全展開（100％），一旦換到一個新行。我很接近，但是當第三個div覆蓋時，有80％的財產開始投入，並且不允許它完全擴張。 I have a fiddle ready for tweaking here.下面是可視化問題的圖像。您可以在第二張圖片中看到第三個div在包裝發生時不是100％展開。

enter image description here

來源

2013-02-06 Halcyon

對不起，沒有純粹的CSS解決方案。使用jQuery ...

你想附加一個事件到window.resize。請注意，window.resize會刷新常量，因此需要一些額外的功能來等待調整大小在啓動方法之前保持半秒。

標記

<div> 
    <div id="firstcont" style="float:left; display:inline-block;"> 
     <select></select> 
     <select></select> 
    </div> 
    <div id="secondcont" style="margin-left:80px;"> 
     <input id="note" style="width: 99%;" /><br /> 
    </div> 

</div>

的Javascript：

$(window).resize(function() { 

    //wait a half second for a consant resize reading before executing 
    waitForFinalEvent(function(){ 

     var $textbox = $("#note"); 
     var textboxwidth = $textbox.width(); 

     //alert(textboxwidth); 

     if(textboxwidth < 400) 
     { 
      //alert("resizing"); 
      $('#firstcont').css('float', 'none'); 
      $('#secondcont').css("margin-left", "0px"); 
     } 
     else 
     { 
      $('#firstcont').css('float', 'left'); 
      $('#secondcont').css("margin-left", "80px"); 
     } 
    }, 500, "some unique string"); 
}); 

var waitForFinalEvent = (function() { 
    var timers = {}; 
    return function (callback, ms, uniqueId) { 
    if (!uniqueId) { 
     uniqueId = "Don't call this twice without a uniqueId"; 
    } 
    if (timers[uniqueId]) { 
     clearTimeout (timers[uniqueId]); 
    } 
    timers[uniqueId] = setTimeout(callback, ms); 
    }; 
})();

見的jsfiddle這裏：http://jsfiddle.net/eastonharvey/Nsgf8/2/

來源

2013-02-06 20:56:04

-1

試試這個，
這裏的小提琴link

.container { 
    position: relative; 
    background-color: purple; 
    padding: 0; 
    margin: 0; 
    min-width: 400px; 
} 
.first { 
    float: left; 
    width: 10%; 

    background-color: yellow; 
} 
.second { 
    float: left; 
    width: 10%; 

    background-color: orange; 
} 
.third { 
    float: left; 
    width: 80%; 
    background-color: lime; 
} 
.clear { 
    clear: both; 
}

來源

2013-02-06 17:55:29 sourcecode

當我的jsfiddle收縮的iframe這不換行。 – Halcyon

這不符合OP正在努力完成的任務 – Joe

的屬性附加傷害最小寬度。首先&。第二個是問題

類如果你把它刪除，那就別了r行爲

來源

2013-02-06 18:01:57 lindosekai

如何使用CSS縮小父容器縮小

回答

相關問題