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>

但是有一些问题

图像未彼此对齐
中心图像抓取内容的高度因此很大但左/右保持较小，他们需要根据div中的内容量一起增长
在中心图像中，图像由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

您不必使用三张图片。如果你使用the technique described here，你应该能够完成你想要做的事情并且失去很多麻烦。如果元素不够高，您可以尝试为元素设置行高。

Answer 2

大致相同，不需要vapid标记元素：

<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/

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

如何使设置的图像切片左，中，右边彼此相邻并根据内容增长？

2 个答案:

http://jsfiddle.net/3Vb7F/