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将包含图像。

我使用绝对定位将色带相对于侧边栏定位（位置：相对），然后将侧边栏顶部边距设置为与色带容器大致相同的高度，使文本仅在色带下方开始。

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

有几点需要注意：
这假设'ribbon.png'是244 x 45像素 2.我添加了另一个包含课程sidebarBody的div，并将sidebarElement重命名为sidebarHeader

这个解决方案仍然需要一些工作，但希望能给你足够的洞察力来解决你的问题。

奇怪的CSS Div - 需要帮助

2 个答案: