Question

我有以下HTML：

<div id="red-header"></div>
<h1 id="emp-name">Employee Name</h1>

    <div id="midbar" class="bar"></div>

<div id="emp-spotlight-content" class="clearfix">
   <div id="emp-pic-large" class="column clearfix">
    <img src="employeePictures/EmployeeImage.jpg">
   </div>

    <div id="bio" class="column">
    <ul>
        <li><strong>Team Member Since:</strong> August 2011</li>    
        <li><strong>Born in:</strong> LOCATION</li>
        <li><strong>Birthday:</strong> BIRTHDAY</li>
        <li><strong>Family:</strong> FAMILY</li>
        <li><strong>Facts:</strong></li>
        <ul>
            <li>FACT 1</li>
            <li>FACT 2</li>
            <li>FACT 3</li>
        </ul>
    </ul>
    </div>
</div>

<div id="footer" class="bar"></div>

使用以下CSS：

.bar {
height: 3px;
width: 692px;

background-image: url("shortredbar.jpg");
background-repeat: repeat-x;
}

#footer {
height: 3px;
width: 692px;

background-image: url("shortredbar.jpg");
background-repeat: repeat-x;
}

#red-header {
height: 40px;
width: 692px;
background-image: url("redbar.jpg");
background-repeat: repeat-x;
}

#emp-name {
width: 692px;
text-align: center;
}

#emp-spotlight-content {

}

.column {
width: 306;             /* 692px / 2 - (40)  */
padding: 5px;
margin: 10px;
}

#emp-pic-large {
width: 306px;
float: left;
}

#bio {
float: left;
}

中间栏和页脚基本上都是一样的，只是区分以防我需要更改它们。一个应该在内容之上，另一个应该在内容的底部，但它们都显示在堆叠在彼此之上的内容的顶部。

任何人都能看到我错过的东西吗？

Answer 1

尝试将overflow: hidden;放在#emp-spotlight-content上。看起来它正在折叠到0的高度，这将强制它将内容包装在其中。

奇怪的HTML / CSS行为

1 个答案: