5

除了最后一行之外，我真的很想保持 div 块居中。

其他人已经创建了这个小提琴来证明我的问题。即使调整窗口大小，您也可以看到结果面板中的块如何保持居中。我希望有类似的行为但是如果最后一行包含的块少于上面的行，那么最后一行不应该居中而是左对齐。

这是小提琴：http: //jsfiddle.net/zbbHc/1/

有人可能会问为什么我不只使用 float:left。这样做的问题是，如果没有为包装器指定固定宽度，我找不到使用该方法将块居中的方法。我试图让一切都尽可能地流动。

4

4 回答 4

2

试试这个小提琴http://jsfiddle.net/zbbHc/45/

不确定，但我认为这是我们单独使用 CSS 可以做到的最大程度。

更新：（这不会在所有情况下都有效，检查下面的代码在所有情况下都有效[我猜]）

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 ​</p> 

.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; 
}

​</p>

这是使用 jQuery 的快速而肮脏的方法。这将自动添加不可见元素

在这里摆弄 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>
于 2012-07-27T15:56:31.563 回答
1

为什么不用百分比？http://jsfiddle.net/zbbHc/38/这就是大多数流体布局通常的工作方式

于 2012-07-27T15:49:49.570 回答
0

当您说“如果”最后一行的块较少时，您的意思是它是动态内容吗？如果您知道它将有一个，那么您可以将其相对于其自身宽度一半的值（以及任何边距等）进行定位

.iB:last-child{
   position:relative;
   left:-100px;
   background:blue;
}

http://jsfiddle.net/zbbHc/54/

于 2012-07-27T16:13:57.817 回答
0

可以使用表格来执行此操作（尽管我倾向于避免使用表格）。表格单元格的尺寸由它们的内容决定（当然，您可以添加自己的尺寸或最大/最小尺寸）。您可以有一个包含一列的表，并且（尽管这不是最佳做法）将 div 嵌入到表中（每个 div 都是一个块）。

表格的宽度将是流动的，因为它将基于最宽单元格的宽度（因此，块将很好地排列并且看起来非常整洁），并且您可以硬编码或编写脚本（当然，我建议scripting) 一种样式/方法，用于检查最后一行是否包含较少的块，如果确实如此，则仅将该单元格的 text-align 设置为左​​对齐。

这个解决方案可能需要一些改进，但它可能是一个好的开始，这取决于你将它用于什么。

于 2012-07-27T17:08:13.383 回答