奇怪的CSS股利 - 帮助需要

我正在寻找关于如何实现这样的一些帮助：奇怪的CSS股利 - 帮助需要

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

它的工作原理，但是当我在它的内部输入一些文字，并设置一些填充，它只是打破了..

来源

2012-11-19 wiredmark

发布代码将有很大帮助.. – lifetimes

完成！刚刚发布 – wiredmark

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

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

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

来源

2012-11-20 00:24:12 mfreitas

删除了z-index和overflow：可见，没必要。 – mfreitas

有没有足够的信息让我走了，但类似这样的事情呢：

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×45像素。
2.我添加了另一个分度sidebarBody类，并更名为sidebarElement到sidebarHeader

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

来源

2012-11-20 00:16:05 Mike

奇怪的CSS股利 - 帮助需要

回答

相关问题