某些div的CSS高度调整

Question

＆＃13;

＆＃13;

#ArticlesPane
{
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    overflow: auto;
    /*background-color: #4F2412;*/
    /*border: 5px solid yellow;*/
    /*clear: both;*/
    border-top-left-radius: 35px;    
    line-height: 25px;
}

#ArticlesPane > div  /* select direct children */
{
    display: inline-block;    
    height: 100%;   /* This is used to spread background color */
    float: right;
    font-size: 12px;
}

.ArticlesTitle
{
    background-color: #C9A798;
    text-align: center;
    padding: 10px;
}

.ArticlesList
{
    padding: 15px;
}

#pos1.GroupedArticles, #pos2.GroupedArticles
{
    /*width: 34%;*/
    width: 50%;
}

#pos1.GroupedArticles
{
    background-color: #828E8C;
}

#pos2.GroupedArticles
{
    background-color: cornsilk;
}

＆＃13;

<div id="ArticlesPane">
  <div class="GroupedArticles" id="pos1">    
    <div class="ArticlesTitle">Latest posts 1</div>
    <div class="ArticlesList">
      <a href="">title</a><br />
      <span>Some Text</span>
      <a href="">title</a><br />
      <span>Some Text</span>
      <a href="">title</a><br />
      <span>Some Text</span>
      <a href="">title</a><br />
      <span>Some Text</span>
      ...
      <hr>
    </div>
  </div>
  <div class="GroupedArticles" id="pos2">   
    <div class="ArticlesTitle">Latest posts 2</div>
    <div class="ArticlesList">
      <!-- same as above (with any number of items in it) -->
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我正在尝试构建一个两列布局，其中每列包含一些文章（每篇文章的标题和摘要）。 问题在于高度。我试图以适合所有盒子内容的方式设置高度，并且通过放大我不会得到框的滚动条或文本不会消失。另外我想设置向下扩展的背景颜色（填充ArticlesPane的高度）。 使用我自己的代码，文本开箱即用。如何使文字随文字一起增长而不会弄乱布局。

Answer 1

 body
 {
    overflow: hidden;
 }

 #pos1.GroupedArticles
 {
   background-color: cornsilk;
   float:left; 
   display:inline-block;
 }

 #pos2.GroupedArticles
 {
   background-color: #828E8C;
   float:left; 
   display:inline-block;
 }
 .ArticlesList
 {
    padding: 15px;
    text-align: right;
 }