0

私はこのようなことを実現する方法についての助けを探しています:

img http://img1.firenex.net/ssFan8c00f9Ul1QnQzGt.png

難点は、リボン イメージがこの DIV のヘッダーであることですが、ラッパー全体の高さは、その中に書き込むテキストの量に基づいて自動化する必要があります。

私はこれから抜け出す方法を見つけることができません。何か助けはありますか？

これは私が今しなければならないコードです。

<div id="sidebar">
<div class="sidebarElementWrapper"><div class="sidebarElement"></div></div>
</div>

CSS (これはサイドバーだと考えてください):

#sidebar {
width: 225px;
height: auto;
margin-top: 10px;
margin-left: 20px;
min-height: 100px;
float: left;
}

.sidebarElement {
width: 244px;
min-height: 100px;
margin-top: 10px;
background: url(img/ribbon.png) no-repeat top center;
}

.sidebarElementWrapper {
width: 244px;
height: auto;
min-height: 20px;
background: url(img/SidebarElementWrapper.png) repeat-y;
}

それは機能しますが、その中にテキストを入力してパディングを設定すると、それが発生します..

4

2 に答える 2

3

絶対配置を使用すると、作業が簡単になると思います。

JS フィドル: http://jsfiddle.net/qf49w/59/

HTML

<div id="sidebar">
    <div id="ribbon"></div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget tellus at elit sagittis ultrices non nec sem. Curabitur sit amet nibh elit, vitae rhoncus velit. Sed ac nisl ut felis pretium fermentum. Donec sodales lorem ut nibh dapibus id tempus dui tincidunt.
</div>

CSS

 #sidebar { 
        width: 160px; 
        height: auto;  
        background: white; 
        position:relative; 
        padding:40px 10px 10px 10px; 
        margin:40px auto; 
    }  

    #ribbon {
        position:absolute;
        top: -25px;;
        left:-60px;  
        height:60px;
        width:290px;
        background:url(http://www.clker.com/cliparts/e/e/R/Z/Y/n/red-white-ribbon-md.png) no-repeat 0 0;  
    }

構造を単純化しました。必要なのは、コンテンツ用のサイドバー コンテナーと、画像を含むリボン div だけです。

絶対配置を使用してサイドバーに対してリボンを配置し ( position:relative )、サイドバーの上部パディングをリボン コンテナーとほぼ同じ高さに設定して、テキストがリボンの下からのみ始まるようにします。

于 2012-11-20T00:24:12.303 に答える
1

私が話を始めるには十分な情報がありませんが、これに似たものはどうですか:

HTML

<div id="sidebar">
<div class="sidebarElementWrapper"><div class="sidebarHeader">Header</div><div class="sidebarBody">Content</div></div>
</div>

CSS

#sidebar {
width: 225px;
height: auto;
margin-top: 10px;
margin-left: 20px;
min-height: 100px;
float: left;
}

.sidebarHeader {
width: 244px;
height: 45px;
margin-top: 10px;
background: url(img/ribbon.png) no-repeat top center;
}

.sidebarBody {
width: 225px;
margin-left: 10px;
background-color: #ffffff;
}

.sidebarElementWrapper {
width: 244px;
height: auto;
min-height: 20px;
}



注意事項:
1. これは、「ribbon.png」が 244 x 45 ピクセルであることを前提としています。
2. class を持つ別の div を追加し、名前をsidebarBody変更sidebarElementしましたsidebarHeader

このソリューションにはまだ少し作業が必要ですが、問題に対処するための十分な洞察が得られることを願っています.

于 2012-11-20T00:16:05.723 に答える