css - 如何使用自动调整大小的列创建多行部分

Question

仍在学习 CSS，如果这很明显，请原谅 -

我正在构建一个包含四个部分的标题：

|Header-------------------------------|  
|----Title----|----NavigationLinks----|  
|----Taglines-|----SelectionBar-------|
|-------------------------------------| 

我想要的是标语部分自动设置第一列的宽度（它的内容比标题长），然后第二列延伸到标题部分的末尾。我无法弄清楚如何在不设置特定宽度的情况下使列相互匹配 - 是否可以在没有固定宽度区域的情况下做到这一点？

我已经能够使用 display: table-cell; 来接近我需要的东西。但无法弄清楚如何将第二行“连接”到第一行。

更新：缺少标签导致 div 忽略 display: table* 设置。使用 display: table/table-row/table-cell 创建表格布局可以满足我的需要：table-cell 将自动拉伸影响其上方行宽的列。

Answer 1

不确定这是否是您正在寻找的。问题似乎有点不清楚。

http://jsfiddle.net/KacPY/1/

Answer 2

而不是使用过时的表格，我会考虑用百分比来表示你的宽度，以便有一个流畅的布局。

http://jsfiddle.net/kJRQE/