我真的坚持尝试保持div块居中,除了最后一行.
其他人已经创造了这个小提琴,这些都证明了我的问题.即使调整窗口大小,您也可以看到结果面板中的块如何保持居中.我想有类似的行为,但如果最后一行包含的块少于上面的行,那么最后一行不应该居中但是左对齐.
这是小提琴:http: //jsfiddle.net/zbbHc/1/
有人可能会问为什么我不只是使用float:left.问题是我找不到使用该方法对我的块进行居中的方法,而没有为我的包装器指定固定的宽度.我试图让一切尽可能保持液体.
试试这个小提琴http://jsfiddle.net/zbbHc/45/
\n\n不确定，但我认为这是我们单独使用 CSS 所能做到的最大程度。
\n\n更新：（这并非在所有情况下都有效，请检查下面的代码，该代码在所有情况下都有效[我猜]）
\n\n超文本标记语言
\n\n<div class="wrapper">\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB hide"></div>\n <div class="iB hide"></div>\n</div>\nCSS \xe2\x80\x8b
\n\n.wrapper {\n width: 100%;\n background: red;\n text-align: center;\n text-align-last: left;\n}\n\n.iB {\n display:inline-block;\n width: 200px;\n height: 100px;\n background: green;\n}\n.iB.hide {\n visibility:hidden; \n}\n\xe2\x80\x8b
\n\n这是使用 jQuery 的快速但肮脏的方法。这将自动添加不可见元素
\n\n在这里小提琴http://jsfiddle.net/fD6fn/
\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n<title>Untitled Document</title>\n<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>\n<style>\n.wrapper {\n width: 100%;\n background: red;\n text-align: center;\n text-align-last: left;\n}\n\n.iB {\n display:inline-block;\n width: 200px;\n height: 100px;\n background: green;\n}\n.iB.hide {\n visibility:hidden; \n}\n\xe2\x80\x8b\n</style>\n</head>\n\n<body>\n<div class="wrapper" id="wrapper">\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n <div class="iB"></div>\n</div>\n<script language="javascript">\nfunction findHiddenElementCount() {\nvar $wrapper = $("#wrapper"),\n itemWidth = "200",\n count = "",\n itemCount = 7; \n\n count = $wrapper.width()/itemWidth;\n\n// Some wild logic below, can be optimized.\nreturn parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;\n}\n\n\n\nfunction addInvisibleElements() \n{\n // Delete invisible items\n $("#wrapper .iB.hide").remove();\n\n\n var c = findHiddenElementCount();\n\n for(var i = 0; i < c;i++)\n {\n $("#wrapper").append(\'<div class="iB hide"></div>\');\n }\n\n}\n\n$(window).bind("resize",addInvisibleElements); // resize handler\n\n$(document).ready(addInvisibleElements); // take care during page load\n\n</script>\n</body>\n</html>\n