让我解释一下,我在父 div 中有几个浮点数,由于父级宽度限制,有可能会转到新行,是否可以在 CSS 中执行?
例如:设置所有 div 的样式,如 div3 和 div5 以及所有下一个可能中断的 div?(请注意,仅在我的示例中,宽度和高度并不是固定的)
http://jsfiddle.net/frntz/aMzF7/1/
谢谢你。
让我解释一下,我在父 div 中有几个浮点数,由于父级宽度限制,有可能会转到新行,是否可以在 CSS 中执行?
例如:设置所有 div 的样式,如 div3 和 div5 以及所有下一个可能中断的 div?(请注意,仅在我的示例中,宽度和高度并不是固定的)
http://jsfiddle.net/frntz/aMzF7/1/
谢谢你。
你不能只用 CSS 来做到这一点。您需要使用一些 JavaScript 来根据 div 的宽度计算容器的宽度。将被包装到下一行的 div 可以由超过包装器宽度的累积 div 宽度等确定。然后 JavaScript 可以轻松地重置宽度累积并应用类并继续子节点的迭代,直到所有 'wrapped ' div 被找到并设置样式。
这是一个使用 jQuery 的例子:
var maxWidth = $('#parent').width(),
accWidth = 0;
$('#parent').children().each(function(){
accWidth += $(this).width();
if (accWidth > maxWidth) {
$(this).addClass('newline');
accWidth = $(this).width();
}
});
演示 1:http: //jsfiddle.net/AlienWebguy/77NTw/
演示 2:http: //jsfiddle.net/AlienWebguy/77NTw/1/
这是一个香草JS的例子:
var maxWidth = document.getElementById('parent').offsetWidth,
accWidth = 0,
nodes = document.getElementById('parent').childNodes,
i;
for (i in nodes) {
if (nodes[i].hasOwnProperty('offsetWidth')) {
accWidth += nodes[i].offsetWidth;
if (accWidth > maxWidth) {
nodes[i].className += ' newline';
accWidth = nodes[i].offsetWidth;
}
}
}
演示 3:http: //jsfiddle.net/AlienWebguy/77NTw/2/
是的。
如果父容器中没有空间,浮动将始终转到下一行。