如何将Side-By-Side Divs与剩余空间分开？

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。

Answer 2

让我们尝试非正统的方法

使用CSS flex 显示

，自动宽度和垂直对齐变得非常容易

获取基本布局，垂直和水平对齐的代码（带填充或边框或文本对齐）

<div id="main-container">
       <div class="content1">a
              <!--- I am fixed at 200px ---->            
       </div> 
       <div class="content2">bbb
              <!--- 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 class="content3">c
              <!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
       </div>
</div>


#main-container {
     width: 900px;
    display: flex;
}

.content3 {
    flex-grow: 1;
}

.content1 { 
     width: 200px;
}

小提琴 - http://jsfiddle.net/n3CwB/

现在您可能希望保留原始HTML结构，如果您想要更多地控制内容的对齐（例如在内容中间垂直对齐），但这应该让您开始使用基本布局。