奇怪的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股利 - 幫助需要

回答

相關問題