可扩展宽度H2与BG

问题描述：

我正在尝试使用3个图像（左侧，重复和右侧）作为'语音气泡'标题的bg，但不能让中间重复填充容器div。可扩展宽度H2与BG

这里就是它（与 '你好' 灰色泡沫）http://www.dev.inside-guides.co.uk/brentwood/pages/index.html

这里的CSS：

.right-nav .speech-left {float:left;background:url(/images/speech-left.png) no-repeat;width:55px;height:47px;} 
.right-nav h2.speech-repeat {display:block;float:left;background:url(/images/speech-repeat.png) repeat-x;height:47px;} 
.right-nav .speech-right {float:left;background:url(/images/speech-right.png) no-repeat;width:10px;height:47px;}

和HTML：

<div class="bg clearfix" style="width:100%;"> 
<div class="speech-left"></div> 
<h2 class="speech-repeat">hello</h2> 
<div class="speech-right"></div> 
</div>

任何帮助非常赞赏。

您的代码在这里和实时代码是不同的，这里的代码工作正常，实时代码使用内联块和没有浮动。 – 2012-07-27 10:50:35

对我来说工作正常，我只是用萤火虫把你在这里的样式放在你的网站上，并且工作得很好。确保将其更改为“block”，但在这种情况下，“inline-block”将正常工作，并确保向左浮动。 – 2012-07-27 11:09:04

答

您可能需要浮动中间元素太：

.right-nav h2.speech-repeat { 
    background: url(/images/speech-repeat.png) repeat-x; 
    height: 47px; 
    float: left; 
}

中间元素浮动在问题的代码中。虽然他的实时代码是不同的。 – 2012-07-27 10:50:06

@JonTaylor，哼，没错，无论如何，当我看到它时，并没有出现在样本中：P现在它似乎在工作。 Thx的小费！ – scumah 2012-07-27 10:53:13

答

我建议不同的分割图像。它现在确实有效，但是由于左侧图像包含底部气泡上的粘滞位，因此气泡的中间部分无法启动，直到左侧部分完全结束。

您可以使用边距来抵消中间部分以使文字显示在左侧图像的顶部，但是我倾向于使用九个补丁工作的相同方式。

enter image description here

使用这种结构的明显使用了更多的图像，但能产生更好的效果，你就可以结束调整垂直和水平，以适应任意数量的文本。

也只是因为他们使用9段并不意味着你不能使用更多。沿着底部使用更多的部分可以使粘性物保持相同的比例，而周围的底部部分则会扩大以填充所需的区域。

可扩展宽度H2与BG

相关推荐