我有一个我无法解决的 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% with 属性开始出现并且不允许它完全展开。 I have a fiddle ready for tweaking here.以下是可视化问题的图像。您可以在第二张图片中看到，当进行环绕时，第三个 div 并未 100% 展开。
最佳答案
抱歉，没有纯 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/
关于html - 如何使用 CSS 在父容器收缩时包装一个 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14735553/