將Divs堆疊在頂部，將另一個Divs堆疊到一邊

Question

我想彼此之間有幾個div堆疊（我有），但另一個div的右側還有另一個div。 現在，所有內容都堆疊在一起，甚至BeliefDescription div也要堆疊在一起，而div則必須位於其他所有元素的右側。 感謝您的幫助。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<div id="Cat">
    <div id="God" class="BeliefCat">God</div>
    <div id="Jesus" class="BeliefCat">Jesus Christ</div>
    <div id="HolySpirit" class="BeliefCat">Holy Spirit</div>
    <div id="Bible" class="BeliefCat RemainingCat">The Bible</div>
    <div id="Man" class="BeliefCat RemainingCat">Man</div>
    <div id="GodsRelationship" class="BeliefCat RemainingCat">God's Relationship to His Creation</div>
    <div id="Salvation" class="BeliefCat RemainingCat">Salvation</div>
    <div id="SavedWho" class="BeliefCat RemainingCat">Who Can Be Saved?</div>
    <div id="Perseverance" class="BeliefCat RemainingCat">Perseverance</div>
    <div id="GospelOrd" class="BeliefCat RemainingCat">Gospel Ordinances</div>
    <div id="Resurrection" class="BeliefCat RemainingCat">Resurrection</div>
    <div id="ChurchGov" class="BeliefCat RemainingCat">Church Government</div>
    <div id="SecondComing" class="BeliefCat RemainingCat">Christ's Second Coming</div>
    <div id="Missions" class="BeliefCat RemainingCat">Missions</div>
</div>

 <div id="BeliefDescription">
    HELLO
</div>

.BeliefCat
{
    border: 1px solid black;
    width: 33%;
    height:25px;
    text-align:center;
    font-weight:bold;
}

#Cat
{
    margin-top:20px;
} 

#BeliefDescription
{
    float:left;
}

Answer 1

如果你想讓#cat和#BeliefeDescription並排你有浮動兩個人身上，不僅#BeliefDescription 。

在#Cat添加float:left可以解決您的問題，但隨后您必須為其設置寬度。

Answer 2

請注意， float屬性使元素浮動在其后的元素上方。 因此，請將#BeliefDescript放置在Cat div之前，並將其設置為float:right

http://jsfiddle.net/1tLfaryk/1/

或在Cat元素上設置float屬性，並將其設置為float:left;

http://jsfiddle.net/1tLfaryk/2/

Answer 3

試試這個： http : //jsfiddle.net/9rcs4v1c/3/

.BeliefCat
{
    border: 1px solid black;
    width: 100%;
    height:25px;
    text-align:center;
    font-weight:bold;
}

#Cat
{
    float: left;

} 

#BeliefDescription
{
    float:left;
}