Question

我需要做dinamic圆形盒子，（dinamic height和dinamic width）我尝试使用以下链接中的代码提供：

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！

BTW关于你的文字为什么要包装，这是因为你有几个div标签，它们是块元素（display：block）。这使得它们彼此叠加（它们有点像段落）。我不知道为什么你有几个div，但你可以像这样改变div的显示值：

.MiddleLeft div {
  display: inline;
}

或者将它们更改为span标签，这是内联元素。你可以通过谷歌搜索来找到更多的跨度和差异; div标签。

希望这一切都有帮助！

阿里。

文本在圆角框中包裹

1 个答案: