0

我有一个我无法弄清楚的 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% 的属性会启动并且不允许它完全扩展。我有一个小提琴准备在这里调整。下面是可视化问题的图像。您可以在第二张图片中看到，在进行换行时第三个 div 没有 100% 展开。

在此处输入图像描述

在此处输入图像描述

4

3 回答 3

0

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

如果你删除它，有另一种行为

于 2013-02-06T18:01:57.017 回答
0

抱歉，没有纯 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-06T20:56:04.957 回答
-1

试试这个，
这是小提琴链接

    .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-06T17:55:29.213 回答