三列布局，外部元素填充剩余空间中间元素的大小由其内容组成

Question

我在制作布局时遇到问题，如下图所示：

我需要用水平线装饰H2。线的大小和位置取决于H2的含量。 H2的背景必须是透明的，因为背后的背景没有纯色。

你知道如何设计这个样式吗？允许使用任何HTML和CSS，没有任何限制。

Answer 1

这可以仅使用HTML和CSS来实现，但您可能需要考虑浏览器兼容性。 This website显示了一些非常棒的HTML / CSS解决方案以及它们与多种浏览器的兼容性。还有一种使用jQuery的方法（在网站上）。

Answer 2

我来到这个涉及display: table和display: table-cell的纯css解决方案（所有现代浏览器和IE＆gt; 7，请参阅http://www.quirksmode.org/css/display.html）

HTML

<h2><span>An example of title</span></h2>

CSS

h2 {
  display: table;
  width: 100%;
  text-align: center;
}


h2 span {
    display: table-cell;
    padding: 0 15px;
    white-space: nowrap;
}


h2:before, h2:after {
   content : "";
   width   : 50%;
   display : table-cell;
}

h2:before { background: ... /*a line background in position center right; */ }
h2:after  { background: ... /*a line background in position center left; */  }

由于你的线以一条非常小的垂直线结束，你应该创建两个不同的背景（或一个精灵），每个宽度至少为最大布局宽度的50％，并将它们作为before和{{的背景插入1}} after

的伪元素

jsFiddle示例（在FX9和CH16上测试）：http://jsfiddle.net/PsCrk/2/