中心固定宽度div，左右两侧有流体div？

Question

我正在使用wordpress网站 我有这样的装饰标题，如下所示：
（以下不是真正的html结构，只是作为示例目的）

<div class="decoration-left"> <div class="title"> <div class="decoration-right">

.title里面有一个h1标题。
.decoration-left和.decoration-right是空div，带有装饰背景。
我需要标题始终居中。

我首先尝试给所有三个div增加33.3％的宽度，这在大屏幕上效果很好，但是当我缩小窗口时，标题会分成两行，看起来很难看。因此，我需要标题具有恒定的宽度。我不希望文字变小。

现在，我的.title div为＆＃34; width：auto＆＃34;哪个工作正常。然而，我需要左右装饰div以响应/流畅的方式占据每一个，剩余空间的一半。

附上图片以获得更好的学习费用。！

Answer 1

如果您不介意标题与某些屏幕尺寸上的装饰div重叠，那么您可以使用

绝对定位装饰div

position:absolute;
left:0px; (OR right:0px;)

给他们你喜欢的任何宽度和高度。

Answer 2

我的猜测是：将你的DECORATIVE div放在TITLE div中，将你的TITLE div放在WRAP div中。将TITLE div设为＆＃39; position：relative;显示：内联块;背景：#FFF;＆＃39;具有＆＃39;位置的装饰性的：绝对的;左：-50px;＆＃39;和＆＃39;位置：绝对;右：-50px;＆＃39;和WRAP与＆＃39; text-align：center; background：url（LINE IMAGE LINK）中心repeat-x;＆＃39;。

我知道这很难理解，但我确信它会以这种方式运作。我会尝试通过对其中的一些进行编码来使其看起来更好：

HTML：

<div class="title-warpper">
 <div class="title">
  <div class="decoration-left"></div>
  <span>YOUR TITLE HERE</span>
  <div class="decoration-right"></div>
 </div>
</div>

CSS：

div.title-wrapper {
 background:url(LINE IMAGE LINK) center repeat-x;
 text-align: center;
}
div.title {
 position:relative;
 background:#fff;
 display:inline-block;
}
div.decoration-right{
 position:absolute;
 right:-25px;
 background:url(DECORATION BG LINK);
 width:25px;
 height:25px;
}
div.decoration-left{
 position:absolute;
 left:-25px;
 background:url(DECORATION BG LINK);
 width:25px;
 height:25px;
}

我将装饰div设置为25px，但使用你需要的东西。只需记住调整它们以及左右属性以满足您的需求。