html - 如何使设置的图像左、中、右相邻并根据内容增长？

Question

所以我想创建一个由三个图像组成的图像......

左、中、右。

我有一个中心图像的原因是内容可以根据父 div 的宽度增加宽度。左右图像具有图像的边框轮廓。

我正在尝试这样的事情

#solutionsNav div.leadgenLeft 
{
    display: inline-block; 
    background: url(/images/leadgen_left.png) no-repeat; 
}
#solutionsNav div.leadgenRight 
{
    display: inline-block; 
    background: url(/images/leadgen_right.png) no-repeat;
    float: left;
}

#solutionsNav div.leadgen {
    background: url(/images/leadgen_center.png) repeat-x;
    color: #FFF;
    cursor: pointer;
   display: inline-block;
}

然后标记如下

<div class="leadgenLeft">&nbsp;</div>
<div class="leadgen">
    <h3>
       <asp:Literal ID="LeadGenSpotTitleLiteral" runat="server"></asp:Literal>
    </h3>        
    <asp:Literal ID="LeadGenSpotDescriptionLiteral" runat="server"></asp:Literal>        
</div> 
<div class="leadgenRight">&nbsp;</div>

但有几个问题

1. 图像彼此未对齐

2. 中心图像抓住内容的高度，所以很大，但左/右保持小，它们需要根据 div 中的内容量一起增长

3. 在中心图像中，图像由 2 种绿色构成，顶部为浅绿色，底部为深绿色。但如果内容很少，则仅显示图像顶部，因此仅显示浅绿色。是否有可能无论高度是多少，即使高度小于原始图像，图像也会始终完整显示？

编辑代码：

.wrapped { position:relative; padding:0 20px; background:url(/Website6/Styles/leadgen_center.png); min-height: 205px; width:350px; }
.wrapped:before {
content:'';
position:absolute;
top:0; left:0; bottom:0; width:9px;
background:url(/Website6/Styles/leadgen_left.png);
}
.wrapped:after {
content:'';
position:absolute;
top:0; right:0; bottom:0; width:9px;
background:url(/Website6/Styles/leadgen_right.png)
}
</style>
<div class="wrapped">
  <h3>
     This is the title
     </h3>        
     This is the description
</div>

Answer 1

您不必使用三个图像。如果您使用此处描述的技术，您应该能够完成您想要做的事情并且省去很多麻烦。如果元素不够高，您可以尝试为元素设置行高。

Answer 2

大致如此，不需要乏味的标记元素：

<style type="text/css">
  .wrapped { position:relative; padding:0 20px; background:url(center.png) }
  .wrapped:before {
    content:'';
    position:absolute;
    top:0; left:0; bottom:0; width:20px;
    background:url(left.png)
  }
  .wrapped:after {
    content:'';
    position:absolute;
    top:0; right:0; bottom:0; width:20px;
    background:url(right.png)
  }
</style>
<div class="wrapped">Lots of text here</div>

在行动中看到：

http://jsfiddle.net/3Vb7F/

将前后宽度设置为图像的大小；根据需要设置填充宽度，至少与图像一样宽。