中心 <div> 框與左對齊和右對齊 <div> 上面的盒子

Question

在學習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>

和我的CSS代碼以進行對齊：

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

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

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

我嘗試將左右兩個框放在自己的元素中，但這沒有任何區別。

感謝您的幫助，如有需要，我可以提供更多信息。

Answer 1

由於您具有float元素，因此第3 div（以下一個元素）將忽略它，只需添加clear: both添加到3rd div即可，不允許在此元素的兩側使用float元素。

clear CSS屬性指定元素是可以在其之前的浮動元素之后，還是必須向下移動（清除）在其下方。 clear屬性適用於浮動元素和非浮動元素。 例：

參考： https : //developer.mozilla.org/en/docs/Web/CSS/clear

 div.right-align { width: 45%; float: right; background: red; } div.left-align { width: 45%; float: left; background: aqua; } div.center-align { width: 45%; margin: 0 auto; background: green; clear: both; } 

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