我正在尝试创建一个论坛,但问题是当文本变为div的长度时,文本所在的div不会在高度上扩展。相反,文字出了问题。
我还需要侧边栏(使用用户信息)随文本展开,因此它始终与文本具有相同的高度。
JSFiddle:http://jsfiddle.net/9stPU/1/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
margin-left: 50px;
}
.forumContent li {
padding: 5px 0 5px 10px;
margin-left: -40px;
min-height: 41px;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
height: 100%;
}
.topicUser h3 {
margin-left: 2.5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7.5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
答案 0 :(得分:1)
ADD:
.forumContent {
...
overflow: hidden; /* ADD THIS */
}
出现此问题的原因是容器元素forumContent
的高度自动计算(如果未指定),作为非浮点元素高度的总和。浮动元素的高度不够考虑。