Html 居中<；部门>；长方体与左右对齐的长方体碰撞<；部门>；上面的盒子

在学习了HTML和CSS之后，我一直在做一个项目（还没有学习JavaScript，但我很快就会开始学习），我遇到了一个小问题

我尝试创建两个div框（分别左对齐和右对齐，都是45%宽度），然后在其下方创建一个以45%宽度为中心的div框。从技术上讲，它是可行的，但问题是，当居中的div框位于左框和右框的下方时，只有一半是。另一半倒入上面左右框的边缘

这是这3个框的HTML代码的外观：

    <div class="left-align">
        <p class="medium-font">
            This box is <b>left-aligned</b>, so it'll be much less wide than other boxes.
        </p>
    </div>

    <div class="right-align">
        <p class="medium-font">
            This is box <b>right-aligned</b>, so it'll also be much less wide, however it's on the right now.
        </p>
    </div>

    <div class="center-align medium-font dotted-border bg-dkred">
        <form>
            <span>Form test thing i dunno</span>
            <p>Favorite gemstone:</p>
            <input type="text" name="fav-gem" value=""><br/>
        </form>
    </div>

我试着将两个左右框放在它们自己的元素中，但是没有任何区别

---

非常感谢您的帮助，如果您需要，我可以提供更多信息。

因为您有float元素，因此它被第三个div（下面的一个）忽略，只需将

clear:both

添加到第三个div，以在该元素的两侧不允许使用float元素

clear CSS属性指定一个元素是可以位于它前面的浮动元素旁边，还是必须向下移动（清除）。clear属性适用于浮动和非浮动元素。 例如：

参考：

div.right-align{
宽度：45%；
浮动：对；
背景：红色；
}
分区左对齐{
宽度：45%；
浮动：左；
背景：水；
}
div.center-align{
宽度：45%；
保证金：0自动；
背景：绿色；
明确：两者皆有；
}

这个盒子是左对齐的，所以它的宽度也会小很多，但是现在它在左边。


这是框右对齐的，所以它的宽度也要小得多，不过它现在在右边。

形式测试我不知道
最喜欢的宝石：

完美！也只使用了一行额外的代码，这很好。

div.right-align
{
    width:45%;
    float:right;
}

div.left-align
{
    width:45%;
    float:left;
}

div.center-align
{
    width:45%;
    margin:0 auto;
}