Question

我对CSS并不熟悉，并遇到以下问题：

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

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

// 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

新块的代码如下：

<div id="newblock">  

 Text

</div>

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

Answer 1

尝试clearing您的花车，看看是否有帮助。另外，请确保您的页面有效。

Answer 2

我不确定我是否完全理解你的问题。我建议你将所有新闻列表包装成外包装。然后，将新闻框定位在此之下应该是微不足道的。再次，您能否更好地解释屏幕截图中的错误？

CSS：格式化块。奇怪的高度行为或如何通过块内的内容调整高度

2 个答案: