奇怪的CSS Div-需要帮助

Question

我正在寻找有关如何实现这样的帮助：

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;
}

它可以工作，但是当我在其中键入一些文本并设置一些填充时，它就会爆发。

Answer 1

我认为使用绝对定位使事情变得更容易。

JS FIDDLE： 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）定位，然后将侧边栏顶部填充设置为与功能区容器相同的高度，使文本仅在功能区下方开始。

Answer 2

没有足够的信息供我参考，但是类似的事情呢：

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.我添加了另一个带有sidebarBody类的div， sidebarBody重sidebarElement为sidebarHeader

该解决方案仍需要一些工作，但是希望可以为您提供足够的见解以解决您的问题。