2

我想在 CSS 中实现如下效果：

在此处输入图像描述

我将 CSStable-cell与伪元素:before一起使用，以便它们在一行中自动调整宽度。换句话说，我希望文本容器具有文本的宽度（带有一些填充），并且伪元素填充该区域的其余部分。这意味着我不能使用 1px位于顶部，因为每个单词都有不同的宽度。:after background-image

这是小提琴。

HTML

<div id="container">
    <div id="box">
        <h2 id="header">UPDATES</h2>
    </div>
</div>

CSS

#container {
    background:url("http://lorempixel.com/output/abstract-q-g-640-480-9.jpg") center center no-repeat;
    padding-top:50px;
    height:400px;
    width:50%;
    margin:0 auto;
}
#box {
    margin:0 auto;
    width:50%;
    display:table;
}
#header {
    color:#fff;
    font:14px Arial;
    font-weight:500;
    line-height:10px;
    height:10px;
    display:table-cell;
    padding:0 10px;
    width:auto;
    text-align:center;   
}
#box:after, #box:before {
    content:"";
    display:table-cell;
    border:1px solid #fff;
    border-bottom:0;
    height:10px;
    width:50%;
}
#box:after{
   border-left:0;
}
#box:before{
    border-right:0;
}

但是，它在 Opera 中不起作用，所以我需要找到一种不同的技术来达到相同的效果。我宁愿避免使用 HTML 表格和任何 js。你能提供什么建议吗？

4

3 回答 3

2

经过多次测试，我发现Opera 在使用带有伪元素的 CSS 表格时需要更详细的实现。换句话说，将父容器设置为display:table并将子容器设置为 是不够的display:table-cell。

您需要设置整个层次结构，这意味着：

父级需要设置为： display:table

第一个孩子需要设置为： display:table-row

最后将其他孩子设置为： display:table-cell

如果你display:table-row像我一样设置你的 CSS 忽略，Opera 将子元素（在 之后display:table-cell）设置为table-row而不是 as table-cell，因此每个子元素的宽度延伸到父元素的 100% 并且表现得像一行。像在 HTML 表格（表格 > 行 > 单元格）中一样设置表格层次结构，您将获得预期的格式。

这似乎只影响 Opera，因为所有其他浏览器都不会尝试修复 CSS 表的层次结构。

这是演示 （也可以在 Opera 中查看）

于 2013-07-29T09:36:54.287 回答
2

在这个例子中，我去掉了伪元素并将标题标签夹在两个被设计为表格的标签之间以获得线条效果。虽然这是使用 CSS 表格完成的，但类似的概念应该适用于 html 表格。

    <div id="before" ></div>
    <h2 id="header">UPDATES</h2>
    <div id="after"></div>

像这样的风格......

          #before {
              content:"";
              display:table-cell;
              border:1px solid #fff;
              border-bottom:0;
              border-right:0;
              height:10px;
              width:50%;
          }
          #after {
              content:"";
              display:table-cell;
              border:1px solid #fff;
              border-bottom:0;
              border-left:0;
              height:10px;
              width:50%;
          }

http://jsfiddle.net/SteveRobertson/9SBXn/12/

于 2013-07-26T13:01:14.393 回答
1

inline-blocks您可以使用百分比宽度来代替 CSS 表格，max-width这样容器就不会出现在新行中。

于 2013-07-30T14:00:37.230 回答