奇怪的css浮动行为

Question

为什么professor div不向左浮动？它在members容器上“挂起”。包含所有红色divs的主容器没有设置高度，因此professor div有足够的空间向左移动。 divs设置为向左浮动，以防它不明显。我知道什么是错的，我该如何解决？

<div id="displayEventInfoDiv">
        <div class="eventInfoDiv">
            <p id="infoClassTitle" class="eventInfoTitle">Class:</p>
            <p id="infoClassP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoLocationTitle" class="eventInfoTitle">Location:</p>
            <p id="infoLocationP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoTimeTitle" class="eventInfoTitle">Time:</p>
            <p id="infoTimeP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoToolsTitle" class="eventInfoTitle">Tools:</p>
            <p id="infoToolsP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoMessageTitle" class="eventInfoTitle">Message:</p>
            <p id="infoMessageP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoMembersTitle" class="eventInfoTitle">Members:</p>
            <p id="infoMembersP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoSectionTitle" class="eventInfoTitle">Section:</p>
            <p id="infoSectionP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoNumberTitle" class="eventInfoTitle">Course Number:</p>
            <p id="infoNumberP" class="eventInfoP"></p>
        </div>
        <div class="eventInfoDiv">
            <p id="infoProfessorTitle" class="eventInfoTitle">Professor:</p>
            <p id="infoProfessorP" class="eventInfoP"></p>
        </div>
        <button id="exitEventInfoDivButton">exit</button>
    </div>



#displayEventInfoDiv    // main container
{
    position:absolute;
    width:60%;
    left:20%;
    padding: 10px 10px 40px 10px;
    background-color: rgba(0,0,0,0.7);;
    border-radius: 10px;
    display:none;
    z-index: 30;

}
#exitEventInfoDivButton // exit button
{
    position:absolute;
    bottom:10px;
    right:10px;
    height:30px;
    width:80px;
    background-color: rgba(255,255,255,0.4);
    font-size:20px;
    color:black;
    border-radius: 10px;
    border:none;
    outline:none;
    font-family: 'Indie Flower', cursive;
    cursor:pointer;
}
.eventInfoDiv  // red div
{
    width:200px;
    float:left;
    padding: 0 10px 0 10px;
    background-color:red;
    border:3px solid black;
}
.eventInfoTitle  //titles
{
    height:30px;
    width:100%;
    font-size:25px;
    color:white;
    text-align:center;
    margin:0 0 20px 0;

}
.eventInfoP // info under titles
{
    width:100%;
    border-radius: 10px;
    text-align:center;
    font-size:20px;
    background-color: rgba(255,255,255,0.4);
    padding: 10px 0 10px 0;
}

Answer 1

我要为成员添加一个额外的类来正确调整它的大小，所以你是教授div因为浮动而不是坐在它旁边：左。

或者定位你是教授div并将其设置为：clear：both

您可以使用

执行此操作

<div class="eventInfoDiv professor">
        <p id="infoProfessorTitle" class="eventInfoTitle">Professor:</p>
        <p id="infoProfessorP" class="eventInfoP"></p>
</div>

.professor {
    clear: both;
}