中心div块，但不在最后一行 [英] center div blocks but not in the last row
问题描述
其他人已经创建了这个小东西，这种演示我的问题。您可以看到结果面板中的块在调整窗口大小时保持居中。我想有类似的行为，但如果最后一行包含比上面的行更少的块，那么最后一行不应该居中，但左对齐。
这里是fiddle：
http://jsfiddle.net/zbbHc/1/
有人可能会问为什么我不只是使用float：left。问题是，我找不到一个方法使我的块使用该方法，而不指定一个固定的宽度为我的包装。
尝试这个小提琴 http://jsfiddle.net/zbbHc/45/
不确定，但我
更新：（这不会在所有情况下都工作，请检查下面的代码工作在所有情况下[我猜]）
HTML
< div class =wrapper>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB hide>< / div>
< div class =iB hide>< / div>
< / div>
CSS
.wrapper {
width：100％;
background：red;
text-align：center;
text-align-last：left;
}
.iB {
显示：inline-block;
width：200px;
height：100px;
background：green;
}
.iB.hide {
visibility：hidden;
}
这里是使用jQuery的快速和脏的方法。
此处 http ：//jsfiddle.net/fD6fn/
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>无标题文档< / title>
< script type =text / javascriptsrc =lib / jquery-1.6.2.min.js>< / script>
< style>
.wrapper {
width：100％;
background：red;
text-align：center;
text-align-last：left;
}
.iB {
display：inline-block;
width：200px;
height：100px;
background：green;
}
.iB.hide {
visibility：hidden;
}
< / style>
< / head>
< body>
< div class =wrapperid =wrapper>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< div class =iB>< / div>
< / div>
< script language =javascript>
function findHiddenElementCount（）{
var $ wrapper = $（＃wrapper），
itemWidth =200，
count =，
itemCount = 7;
count = $ wrapper.width（）/ itemWidth;
//下面的一些荒谬的逻辑，可以优化。
return parseInt（count） - （itemCount - （parseInt（itemCount / parseInt（count））* parseInt（count）））;
}
function addInvisibleElements（）
{
//删除不可见的项目
$（＃wrapper .iB .hide）。remove（）;
var c = findHiddenElementCount（）;
for（var i = 0; i
$（＃wrapper）。append（'< div class =iB hide >< / div>'）;
}
}
$（window）.bind（resize，addInvisibleElements）; // resize handler
$（document）.ready（addInvisibleElements）; //在网页载入时小心
< / script>
< / body>
< / html>
I'm really stuck with trying to keep div blocks centered with the exception of the last row.
Someone else already created this fiddle that kind of demonstrates my question. You can see how the blocks in the result panel stay centered even when the window is resized. I would like to have similar behavior BUT if the last row contains less blocks than the rows above, then that last row should not get centered but left aligned.
Here is the fiddle: http://jsfiddle.net/zbbHc/1/
Someone might ask why I don't just use float:left. The problem with that is that I couldn't find a way of centering my blocks using that method without also specifying a fixed width for my wrapper. I'm trying to keep everything as liquid as possible.
Try this fiddle http://jsfiddle.net/zbbHc/45/
Not sure, but I think this is the maximum we can do using CSS alone.
Update: (THis will not work in all cases, check the code below which work in all cases [I guess])
HTML
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB hide"></div>
<div class="iB hide"></div>
</div>
CSS
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
Here is the quick and dirty method using jQuery. This will add invisible elements automatically
Fiddle here http://jsfiddle.net/fD6fn/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
itemWidth = "200",
count = "",
itemCount = 7;
count = $wrapper.width()/itemWidth;
// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}
function addInvisibleElements()
{
// Delete invisible items
$("#wrapper .iB.hide").remove();
var c = findHiddenElementCount();
for(var i = 0; i < c;i++)
{
$("#wrapper").append('<div class="iB hide"></div>');
}
}
$(window).bind("resize",addInvisibleElements); // resize handler
$(document).ready(addInvisibleElements); // take care during page load
</script>
</body>
</html>
这篇关于中心div块，但不在最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
