將一個右浮動元素包裝在另一個下方

Question

我試圖像這樣將2個div相互放置：

div 1
div 2

這是我在HTML文件中得到的結果：

<div width="100%" z-index:"1">
            <div id="username-full">

                <div id="username-form">
                    <input type="text" name="username" id="username-input" placeholder="Username" />
                </div>

                <div id="username-text">
                    <p>Username:</p>
                </div>
            </div>
        </div>


        <div width="100%" z-index:"1">

            <div id="passwd-full">

                <div id="passwd-form">
                    <input type="text" name="passwd" id="passwd-input" placeholder="passwd" />
                </div>

                <div id="passwd-text">
                    <p>Password:</p>
                </div>

            </div>

        </div>

這是我的CSS文件：

#username-full{
    text-align:right;
    float:right;
    clear:right;
}
#username-text{
    float:right;
    margin-right:5px;
}
#username-form{
    float:right;
    margin-top:13px;
}

#passwd-full{
    text-align:right;
    float:right;

}
#passwd-text{
    float:right;
    margin-right:5px;
}
#passwd-form{
    float:right;
    margin-top:13px;
}

小提琴

如您所見，我嘗試使用z-index，我嘗試將2 div的寬度設置為100％，並嘗試使用float。 另外，我嘗試使用定位，但這也沒有用。 我沒有猜測:(。

問候，盧克

Answer 1

根據您的代碼，嘗試添加以下行：

#passwd-full{
    clear: both;
}

Answer 2

我正在猜測，但請看一下：

#passwd-full {
    ...
    clear: right;
}

演示

Answer 3

如果您希望兩個div彼此之間都大於100％，則應嘗試：

<div id="One">My first content</div>
<div id="Two">My second content</div>

#One, #Two {width: 100%; clear: both;}