Question

我需要一个宽度为100％的标题，并且在第1列和第3列中有3列背景图像：

此解决方案需要跨浏览器兼容。

第一列是背景图像，宽度为50％（不包括字幕宽度）
第二栏是标题。这没有背景（透明）。它的宽度不应该大于它的内容。
第三栏与第一栏相同。

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td>Caption</td>
        <td></td>
    </tr>

table {
    width: 100%;
}
table td:first-child, table td:last-child {
    width: 50%;
    background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
    padding: 0 10px;
    font-size: 30px;
}

没有桌子，这似乎更棘手。

我尝试在父div内的DIV上使用设置百分比宽度，但它总是最终给中心列提供超出其需要的宽度，或者强制标题在不足够的情况下换行。

同样，中间列（标题）的宽度不应大于其内容，并且背景需要透明（不是白色）。

Answer 1

您可以通过在div上设置display:table-cell来解决此问题。我已更新了您的jsFiddle。

HTML

<div class='bg'></div>
<div class='caption'>Caption</div>
<div class='bg'></div>

CSS

div {
  display: table-cell;
}
div.bg {
  width: 50%;
  background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
div.caption {
  padding: 0 10px;
  font-size: 30px;
  text-transform: uppercase;
}

有流体背景图象的标头在边，没有背景在中心

1 个答案: