Question

我希望有几个div叠加在一起（我有），但另一个div在另一组div的右侧。现在一切都只是堆叠在一起，甚至是BeliefDescription 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。

将float:left添加到#Cat会解决您的问题，但之后您必须为其设置宽度。

Answer 2

请注意，float属性会使元素浮动在之后的元素上。因此，要么#BeliefDescript放在Cat div之前，要将其设置为float:right

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

或者在float元素上设置Cat属性，并将其设为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;
}

堆叠Divs在彼此顶部与另一个Div在旁边

3 个答案: