0

<div #id="profile-body"></div>のおかげでdiv にコンテンツがない場合は平行display: inline-block;ですが、この div に任意の種類のコンテンツを入力すると、コンテンツの高さは、margin-top平行している他の div を変更しているかのように機能します。

stylesheet.css

.profile-header{
    margin: 0%;
    padding: 0%;
    font-size: 1em;
    display: block;   
}

.profile-body{
    margin-left: 2%;
}

#profile-left{
    display: inline-block;
    width: 30%;
    height:100%;
    min-height:300px;
}

#profile-middle{
    display: inline-block;
    width: 30%;
    height:100%;
    min-height:300px;
}
#profile-middle-body div{
    display: inline-block;
    width: 30%;
}
#profile-middle-body p{
    display: inline-block;
    width: 65%;
}

#profile-right{
    display: inline-block;
    width: 30%;
    height:100%;
    min-height:300px;
}

index.html

<div id="profile-left">
    <div class="profile-header">
        <hr><p>Too Excessive</p><hr>
    </div>
</div>

<div id="profile-middle">
    <div class="profile-header">
        <hr><p>Bio</p><hr>
    </div>
    <div id="profile-middle-body">
        <!-- Comment to fix dix placement -->
        <div>name</div><p>Brandon Nadeau</p>
        <div>age</div><p>17</p>
        <div>location</div><p>Alaska</p>
        <div>member for</div><p>1 year</p>
        <div>profile views</div><p>62</p>
    </div>
</div>

<div id="profile-right">
    <div class="profile-header">
        <hr><p>About Me</p><hr>
    </div>
</div>
4

2 に答える 2

2

floatこれらの 3 つの div に使用します。それは上昇し、そこにとどまるはずです。

フィドル

#profile-right{
   
    width: 30%;
    height:100%;
    min-height:300px;
    float:left;
}

#profile-left{
   
    width: 30%;
    height:100%;
    min-height:300px;
    float:left;
}

#profile-middle{
   
    width: 30%;
    height:100%;
    min-height:300px;
    float:left;
}
于 2013-05-23T03:23:11.687 に答える
1

レイアウトに%幅のインラインブロックを使用しているため、フロートを避けたい場合は、vertical-align:top; を試すこともできます。3 div すべてで。

于 2013-05-23T07:42:28.967 に答える