将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;
}