html - CSS:格式化 block 。奇怪的高度行为或如何通过 block 内的内容调整高度

Question

我对CSS不是很熟悉，遇到了以下问题:

我正在制作 3 项列表(实际上它们是 div)，并添加了图像标题和一些描述 他们每个人。一切都很好，直到那个时候我被要求在这个之后添加另一个 block ...... 在我尝试之后，我发现添加的 block 几乎完全覆盖了新闻列表:(

这是生成新闻列表+样式的代码

// in loop for 3 items
<div class="newslist">
  <a href="{{ item.get_absolute_url }}">
    <img  src="{% thumbnail item.main_image 230x220 crop %}" alt="{{ item.image_description}}"/>
  </a>
  <br />
  <a href="{{ item.get_absolute_url }}" class="article_title">{{ item.title }}</a>
  <p>{{ item.short_description|truncatewords:35}}</p>
</div>

风格:

.newslist{
    display:block;
    height:auto;
    width: 22%;
    float:left;
    padding: 10px;   
    text-align: left;

}

.newslist a{
    margin-top:30px;
    font-size:12px;
    color: #be1e2d;
    text-decoration:none;

}
.newslist a:hover{
    text-decoration:underline;
}

.newslist br{
    padding: 10px;

}

.newslist img{
    width:150px;
    height:140px;
    text-align:
    padding: 5px;
    margin-bottom:20px;
    border: 1px solid #CCCCCC;
    background:#f1efef;`
}

.newslist p{
    font-size:11px;
}

.newslist a:hover img{
    border: 1px solid blue;

}

主页的完整代码在这里: http://j-in.org.ua

以下是问题的截图: http://img.skitch.com/20091021-d9y2i9h5cpxgk69fji2ue5pcib.png

新区 block 的代码如下:

<div id="newblock">  

 Text

</div>

我刚刚在样式中添加了背景颜色...

Answer 1

尝试 clearing你的花车，看看是否有帮助。 此外，请确保您的页面经过验证。