为什么这个<div>比它的内容宽？</div>

Question

我有一个表单的html代码（由rails生成）：

Form HTML

在Chrome的元素检查器中，左<div>的行为符合预期，但右<div>也包含了左<div>内的内容。

如果右<div>仅包含表格右半部分（不包括“注册”按钮），为什么会这样做？

这是相关的CSS：

Form CSS

Answer 1

您正在使用

.edit_info {
     width: 610px;
     margin: auto;
}

改为使用width: auto：

.edit_info {
    margin: 0 auto;
    width: auto;
}

Answer 2

这是因为left_half设置为float: left，因此right_one堆叠在其上。

你可以......将它们包裹在<div>内，并将两半设置为float: left。