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

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

于 2012-11-20T00:16:05.723 回答