文本环绕在圆角框中

Question

我需要做动态圆角框，（动态高度和动态宽度） 我尝试使用下面链接中的代码：

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 标签，它们是块元素 (display:block)。这使得它们彼此重叠（它们的行为有点像段落）。我不知道为什么你有几个div，但你可以像这样更改div的显示值：

.MiddleLeft div {
  display: inline;
}

或者将它们更改为span标签，它们是内联元素。您可以通过谷歌搜索跨度和跨度之间的差异来了解更多信息。 div 标签。

希望这一切都有帮助！

阿里.