javascript - 如何让一个占用剩余空间的并排 Div？

Question

我的问题是我想要一组并排的 div。这些 div 可以增长到任意高度，因此垂直对齐很重要。正如另一篇 SO 帖子所建议的那样，为了解决垂直对齐问题，我有一个类似于此的结构。请帮我填空。

<div id="main-container">
   <div class="formatter">
       <div class="content1">
              <!--- I am fixed at 200px ---->            
       </div>  
   </div>
   <div class="formatter">
       <div class="content2">
              <!--- I have a rendered element.  I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
       </div>
   </div>
   <div class="formatter">
       <div class="content3">
              <!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
       </div>
   </div>
</div>

在浏览器中显示:

CSS:

#main-container {
     width: 900px;
}

.formatter {
     display: inline-block;
     vertical-align: middle;
}

.content1 { 
     float: left;
     width: 200px;
}

Answer 1

您需要将它们声明为table-cell。