Div不会随文字扩展

时间:2014-06-14 16:47:09

标签: html css

我正在尝试创建一个论坛,但问题是当文本变为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%;
}

1 个答案:

答案 0 :(得分:1)

ADD:

.forumContent {
  ...
  overflow: hidden; /* ADD THIS */
}

出现此问题的原因是容器元素forumContent的高度自动计算(如果未指定),作为浮点元素高度的总和。浮动元素的高度不够考虑。