Question

我遇到了需要处理的定位问题。在容器div中我有两个div，它们都应该在水平方向上相互对中。但是，我在第二个div的定位方面遇到了问题。

如果我添加clear：两个div 2都在一个新行上，这是所希望的。但是，如果使用clear：both margin：0 auto;不起作用。我可以使用什么来使div居中？

HTML：

<div class="row-fluid">
    <div class="span6 offset3 text-center header">
        <h1>Title...</h1>
        <p>Text...</p>
    </div>
    <div class="span3 offset4">
        <form>
          ...
        </form>                 
    </div>
</div>

CSS：

.register .span3 {
    width: 270px;
    clear: both;
    margin: 0 auto;
}

输出：

- Without clear:both
 ____________________________________
|                                    |
|              ______       ______   |
|             |      |     |      |  |
|             | div 1|     | div 2|  |
|             |______|     |______|  |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |


- WITH clear:both
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|  ______                            |
| |      |                           |
| | div 2|                           |
| |______|                           |
|                                    |
|                                    |

- Desired output
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|              ______                |
|             |      |               |
|             | div 2|               |
|             |______|               |
|                                    |
|                                    |

Answer 1

为什么在不浮动时需要清除？ clear 仅适用于浮动情况。

如果您删除 clear：both 并仅插入 margin：0 auto ，则两个div将在页面上居中，一个在另一个之下，如您所愿。

Answer 2

据我了解，Bootstrap的网格系统使用浮动来定位页面上的元素。

唉，如果某事float: left;，则margin: 0 auto;不会将其置于页面中心。它将浮动到左侧。您的div偏离左侧的原因是因为他们已应用offset-3 / offset-4个类。

要将div元素放在页面中间，我怀疑您需要走出Bootstrap的网格框架并做自己的事情。

清除：两者都覆盖保证金：0自动？

2 个答案: