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

标签 css

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

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

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

我想要的是标语部分自动设置第一列的宽度(它的内容比标题长),然后第二列延伸到标题部分的末尾。我不知道如何在不设置特定宽度的情况下使列相互匹配 - 是否可以在没有固定宽度区域的情况下做到这一点?

我已经能够使用 display: table-cell; 接近我需要的东西;但不知道如何将第二行“连接”到第一行。

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

最佳答案

不确定这是否是您要找的东西。问题似乎有点不清楚。

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

关于css - 如何创建具有自动调整大小的列的多行部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10019035/

相关文章:

javascript - 无法对齐作为 css 圆圈的导航列表元素的基线

css - Android WebView 边界半径别名

css - 如何将绝对定位的DIV放在SPAN或相对定位的DIV后面?

html - 如何使用 CSS3 使用放大功能

CSS 3 形状 : inverted rounded corner "tunnel-like style"

html - 使用线性渐变 css 制作三 Angular 形叠加层

css - 样式表.create "not covered by flow"

jquery - 仅对文本区域内段落中的一组单词应用 CSS 背景色

html - CSS 960 网格系统布局问题

javascript - 带边距或填充的 css 图像缩放