0

ボーダーとして使いたい画像があります。

3つのインライン列があり、中央の列を左右の列から分離するこれらの画像が2つあります。

cssborderプロパティを使用できますが、境界線が画像の上部、下部、および中央を通過するため、正しく表示されません。これはできますか？もしそうなら、どうすればできますか？

覚えておくべきことは、中央の列が大きくなると、画像の高さもそれに合わせて大きくなる必要があるということです。ページに高さを設定しないようにしたい。

編集：

サイドコラムまたはセンターコラムのいずれかが大きくなった場合に、これらの境界線の高さを大きくする方法はありますか？

ここに画像の説明を入力してください

<style>
#col1{
display:inline;
float:left;
width:100px;
border:1px solid
}

#col2{
display:inline;
float:left;
width:300px;
border:1px solid
}

#col3{
display:inline;
float:left;
width:100px;
border:1px solid
}
</style>

<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>

境界線が表示されている場合は、この画像に置き換える必要がありますが、画像は最も高い列のいずれかで大きくなるはずです。

4

1 に答える 1

1

画像の境界線を使用するには：

img {border-left: 1px solid #ccc;}
/* assuming that the image is right and you need a border to the left. */

コメントから、これを試してみました...

HTML

<div class="wrap">
    <div class="left"><textarea></textarea></div>
    <div class="right">
        <img src="http://i.imgur.com/Dhu0f.jpg" alt="grow" />
    </div>
</div>​

CSS

.wrap {overflow: hidden; height: auto;}
.left, .right {float: left; height: 100%;}
.right img {height: 100%; width: auto;}​

フィドル： http： //jsfiddle.net/N2bVR/

アップデート：

あなたの質問に最適なオプションは、境界線の画像を体の背景画像として実行し、y軸に繰り返しを与えることです。

于 2012-12-25T01:40:10.070 に答える