如何使用一个剩余空间的并排Div？

我的问题是我想要一组并排的div。这些div可以增长到任意高度，因此垂直对齐很重要。正如另一个SO帖子所建议的，为了解决垂直对齐问题，我有一个类似于此的结构。请帮我填空。在浏览器中如何使用一个剩余空间的并排Div？

<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>

显示：

Table display

CSS：

#main-container { 
    width: 900px; 
} 

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

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

来源

2014-07-12 RandomNews99

我想我一定错过了你问题的一部分，你告诉我们问题是什么...... –

没问题，但当我们不知道问题是什么时，很难提供帮助。哦，你知道吗，如果你不想要前端工作，我可以看看你，我的咨询率是合理的竞争...;） –

也许试着找到一些两列的布局。（我敢肯定，你可以找到更多这些，而不是你的问题的确切答案。）然后你做了一个两列的布局，其中左列是固定的宽度，右边是剩下的空间。如果你得到这个工作，那么也许你可以再次做同样的事情 - 只有这一次你在左栏内发生同样的事情。所以你有： '|固定|内容... |' 之后 '| fixed | ... |内容... |' 这可能工作，取决于你会找到什么样的解决方案。 –

你需要他们宣告为table-cell。

来源

2014-07-12 22:26:50 Marvin

谢谢，但有另一种方式吗？（表格单元格很丑，它是嵌套表格）。我正在摆弄它，让我们说我想让中间一列拿起剩下的东西，第一个固定的，第三个变量，然后表格单元格将不起作用。 – RandomNews99

我从twitter引导知道有一个解决方案。检查示例模板，例如admin /后端示例。 – Marvin

让我们试着一个非正统的方法

自动宽度和垂直对齐方式使用CSS 柔性显示

代码才能获得基本的布局，垂直和水平位置（全无填充或边框或文本的变得非常容易对齐）

<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结构，但这应该让您开始使用基本布局。

来源

2014-07-13 01:19:05 Ralph

如何使用一个剩余空间的并排Div？

回答

相关问题