如何使用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缩小父容器缩小

回答

相关问题