DIV溢出到左栏,不希望它伸展以适应空白区域。

你这样做:

.article {
  margin-left: 100px; /* example */
}

.col-left {
  width: 100px; /* same as margin-left above, might not work with percentage */
}

div默认为块级元素,因此它们尝试水平展开,但即使定义了100%的高度,也不会垂直展开。

左栏的高度只有 它包含的内容。

我建议您在一个分区中嵌套所有的文章分区,这将按您想要的方式约束它们。

变化:

<div class="content-body">
  <div class="col-left">
  </div>
  <h1>Admissions Announcements</h1>
  <p style="padding:5px 0;">Page 1 of 1 pages </p>
  <div class="article odd">
  </div>
  <div class="article even">
  </div>
  <div class="article odd">
  </div>
</div>

到:

<div class="content-body">
  <div class="col-left">
  </div>
  <h1>Admissions Announcements</h1>
  <p style="padding:5px 0;">Page 1 of 1 pages </p>
  <div>
      <div class="article odd">
      </div>
      <div class="article even">
      </div>
      <div class="article odd">
      </div>
  </div>
</div>

可以加清楚:右;到。左栏?

——编辑 您可以将右侧的所有分隔符打包到一个名为.col right的新分隔符中,并使其向右浮动,同时赋予它一个width属性。然后在.col-left样式中添加clear:right。这将产生这样的效果:右边的列不会在左边的列下面继续。我用Firebug测试过,结果成功了。

也许您可以用“col right”类将右列中的元素包装在新的DIV中。我用你的代码和下面的CSS测试了这个:

.col-right 
{    
   float:left;    
}