0

当 div 中没有内容时<div #id="profile-body"></div>是平行的display: inline-block;，但是当我用任何类型的内容填充这个 div 时，内容的高度就好像它正在改变其他margin-top平行的 div。

样式表.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;
}

索引.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

由于您在布局中使用具有 % 宽度的 inline-block - 如果您想避免浮动，您也可以尝试 vertical-align:top; 在所有 3 个 div 上。

于 2013-05-23T07:42:28.967 回答