Html 左右Div的动态大小'；这是根据内容而定的

我正在构建一个网页，其主要内容中有3个DIV左、右、右2。以下是一个粗略的设计：

<div id="content"> 
    <div id="left"></div>
    <div  id="right"></div>
    <div id="right2"></div>
</div>

问题是3个div的左、右和右2不符合内容大小。例如，如果主上下文增加，它们将保持700px的高度。如果我给出height:auto，则div不可见。 为了更好地理解，我附上了两张图片：

---

因此，基本上我也想让左、右DIV的大小动态变化，但找不到方法。感谢您的回复，请使用DIV结构及其css下方的用户

 <div id="content" style="float: left; height: 700px; width: 100%;"> 
      <div class="content_blk">first block content</div>
      <div class="content_blk">second block content</div>
      <div class="content_blk">third block content</div>
    </div>

css
#content{
  float: left;
  height: 700px;
  width: 100%;
}
.content_blk {
  float: left;
  height: 500px;
  width: 100%;
}

第一块内容
第二块内容
第三块内容
css
#内容{
浮动：左；
高度：700px；
宽度：100%；
}
.content_blk{
浮动：左；
高度：500px；
宽度：100%；
}

尝试使用

display:table-cell;
height:auto;

现在我经常看到这个问题

---

当然可以，我将测试它并恢复

display:table-cell;
height:auto;