0

そこで、3つの画像で構成される画像を作成したいと思います...

左、中央、右。

中央の画像を使用する理由は、親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>
4

2 に答える 2

0

3 つの画像を使用する必要はありません。ここで説明されている手法を使用すると、やろうとしていることを達成し、多くの手間を省くことができるはずです。要素の高さが十分でない場合は、要素の行の高さを設定してみてください。

于 2012-04-25T01:33:00.810 に答える
0

ざっくりとしたマークアップ要素は必要ありません。

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

前後の幅を画像のサイズに設定します。パディング幅を必要に応じて、少なくとも画像と同じ幅に設定します。

于 2012-04-25T01:44:03.513 に答える