Question

我有一个我无法弄清楚的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>

我遇到的问题是，当我缩小浏览器窗口时，我想要包装第三个div，但是一旦它换行到新行，它就会完全扩展（100％）。我很接近，但是当第三个div包裹时，80％的属性开始并且不允许它完全展开。 I have a fiddle ready for tweaking here.下面是可视化问题的图像。您可以在第二张图片中看到第三个div在包装发生时没有100％展开。

enter image description here

Answer 1

类.first中的属性min-width; .second是问题

如果删除它，则有其他行为

Answer 2

抱歉，没有纯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/

Answer 3

试试这个，
这是小提琴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;
}

当父容器使用CSS收缩时如何包装Div

3 个答案: