文字圓角盒

Question

我需要做的DINAMIC圓盒，（DINAMIC高度和DINAMIC寬度） 包下來，我嘗試使用在波紋管的鏈接代碼報價：

http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm

，但我需要它也有圖像的中間左側和右側（我不能簡單地使用背景和邊框作爲提供的代碼， 我嘗試修改代碼，並且框看起來不錯，

但是當我在其中輸入文本時，文中換行。

有什麼想法？

HTML代碼

<div class="RoundCrnr"> 
    <div class="TopLeft"></div> 
    <div class="TopRight"></div> 

    <div class="inside"> 
     <div class="MiddleLeft"> 

      <div>text</div> 
      <div>text</div> 
      <div>text</div> 
      <div>text</div> 
      <div>text</div> 
      <div>text</div> 
      <div>text</div> 
      <div>text</div> 

     </div> 

     <div class="MiddleRight"></div> 
    </div> 

    <div class="BottomLeft"></div> 
    <div class="BottomRight"></div> 
</div> 

CSS代碼

.RoundCrnr { 
    width:590px; 
    float:right;  
} 

.TopLeft {  
    background-image: url("/Content/Images/Top_left.png"); 
    height: 34px; 
    font-size: 2px; 
    margin-right: 34px; 
} 

.TopRight { 
    float: right; 
    margin-top: -34px; 
    background-image: url("/Content/Images/box_top_right.png"); 
    height:34px; 
    width: 34px; 
    font-size: 2px; 
} 

.gap-saver { 
    height: 1px; 
    margin: 0 0 -1px 0; 
    padding: 0; 
    font-size: 1px; /* to correct IE */ 
} 

.MiddleLeft { 
    background-image: url("/Content/Images/Middle_left.png"); 
    height: 7px; 
    margin-right: 20px; 
} 

.MiddleRight { 
    float: right; 
    margin-top: -7px; 
    background-image: url("/Content/Images/box_right.png"); 
    height:7px; 
    width: 20px; 
} 

.BottomLeft { 

    background-image: url("/Content/Images/Bottom_left.png"); 
    height: 33px; 
    font-size: 2px; 
    margin-right: 33px; 
} 

.BottomRight { 
    background-image: url("/Content/Images/box_bottom_right.png"); 
    background-position: 100% 0; 
    background-repeat: no-repeat; 
    height: 33px; 
    font-size: 2px; 
    margin-top: -33px; 
} 

.inside { 

} 

非常感謝！

Answer 1

我建議使用純CSS。精確的CSS3。如果你擔心瀏覽器的兼容性，這是真正優秀的： http://css3pie.com/

的文檔應該可以幫助您開始使用一些CSS3代碼，以使一個方塊，圓角，以及如何使用他們的腳本是跨平臺兼容性： http://css3pie.com/documentation/getting-started/

到目前爲止我已經使用了好幾次，現在不怕使用CSS3！

順便說一句，爲什麼你的文字包裝，這是因爲你有幾個div標籤，這是塊元素（顯示：塊）。這使他們坐在一起（他們有點像段落）。我不知道爲什麼你有幾個div的原因，但你可以改變任何像這樣div的顯示值：

.MiddleLeft div { 
    display: inline; 
} 

或更改跨越的標籤，這是內聯元素。您可以通過搜索範圍& div標籤之間的區別來了解更多信息。

希望這一切都有幫助！

Ali。