Question

我想要我的博客文本框，我可以发布Html - CSS代码，用户可以复制它们。示例= The Image Link

我想要使用的图片 = image

我希望如果代码很小。它应自动变为 = Image

并且如果代码很长，它应该会自动像这样 = Image

当我尝试制作它并将代码粘贴在其中时，它变得非常糟糕，你可以看到 = Looking Very Bad

我的CSS代码：

#tbox1 {
    background:url(http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png) no-repeat;
    width:500px;
    height:380px;
    margin:10px;
    padding:20px 40px;
    overflow:auto;
    word-wrap:nowrap;
    /*font styles*/
    font-family:'Open Sans', sans-serif;
    font-size:16px;
    /*1em*/
    color:#000000;
    line-height:20px;
}

HTML CODE

<div id="tbox1">Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code v</div>

你可以在JsFiddle上看到实际发生在我身上的事情 http://jsfiddle.net/e5nHr/

Answer 1

如果你想拥有灵活的高度，你必须从背景中的图像中删除边框并将其插入到css代码中。

border: 4px solid #000;
border-radius: 1em;

即：http://jsfiddle.net/fUaXL/

Answer 2

使用此代码：[http://jsfiddle.net/e5nHr/8/]

另一个问题是你使用了错误的图像，你应该只使用图像的橙色部分并使用css代码进行边缘

任何人都可以帮我HTML-CSS

2 个答案: