Question

我有一堆左浮动的div。在浏览器调整大小时，
如果没有可用的空间，一些div可能属于其他人我想知道是否有办法让小组保持中心 Rigth现在div保持左对齐我告诉你一个'图形'，希望你能理解我

1.-
+++++++++++++++++++++++++++++++++
+  +++++++   +++++++   +++++++  +
+  +++++++   +++++++   +++++++  +
+  +++++++   +++++++   +++++++  +
+                               +
+                               +
+++++++++++++++++++++++++++++++++

2.-
++++++++++++++++++++++++++++
+  +++++++   +++++++       +
+  +++++++   +++++++       +
+  +++++++   +++++++       +
+                          +
+  +++++++                 +
+  +++++++                 +
+  +++++++                 +
+                          +
++++++++++++++++++++++++++++

3.-
++++++++++++++++++++++++++++
+    +++++++   +++++++     +
+    +++++++   +++++++     +
+    +++++++   +++++++     +
+                          +
+    +++++++               +
+    +++++++               +
+    +++++++               +
+                          +
++++++++++++++++++++++++++++

Imagine number 3 is centered!

我的目标是在浏览器上调整浮动的div，保持像3号一样居中

Answer 1

是的，但它没有验证，而且你没有浮动它们：

CSS

div#container {
    text-align: center;
}

div#container>span {
    display: -moz-inline-box; /* FireFox 2 */
    display: inline-block; /* the rest */
    width: 300px;
    height: 100px;
    border: solid 1px;
    margin: 20px;
}

HTML

<div id="container">
    <!-- SPANs for IE, it has a to be an inline element by default to work -->
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
</div>

Answer 2

如果没有太多可怕的黑客攻击，我认为你不会有太多运气。如果div是浮动的，它们将会向左或向右浮动 - 不是居中......

Answer 3

<style>
div.wrap {
    text-align: center;
    border: 1px solid purple;
    max-width: 620px;
    margin: auto;
    line-height: 0;
}
span {
    width: 200px;
    height: 100px;
    border: 1px solid green;
    display: inline-block;
    margin-top: 4px;
}
</style>

<div class="wrap">
    <span></span> <span></span> <span></span>
    <span style="border:1px solid yellow;height:0px;margin:0"></span>
</div>

这项工作的关键是最后一个跨度，它确保底行将是两个元素而不是一个。没有它，最后一个盒子将居中，而不是在左侧与前两个排队。 div包装器上的max-width应该足够适合所有元素，除了隐藏的元素。

Working Demo（在FF3，Safari4，IE7和8中测试）

对于您的网站，最后一个范围将是visibility：hidden（不显示：none），但我将其显示为可见以显示正在进行的操作。

是否有可能将一堆浮动的div放在浏览器大小调整上

3 个答案: