CSS自动调整不是全宽问题

Question

我想这样做泡泡的大小,是在div内部的文本(注释)后自动调整..首先是代码:.bubble {font-size:12px; margin-bottom:0px; }

.bubble blockquote {
    margin: 0px;
    padding: 0px;
    border: 1px solid #c9c2c1;
    background-color: #000;
}
.bubble blockquote p {
    display: inline;
    margin: 0px;
    padding: 0px;
        font-size: 18px;
}

.bubble cite {
    position: absolute;
    margin: 0px;
    padding: 7px 0px 0px 15px;
    top: 5px;
    background: transparent url(b/tip.gif) no-repeat 20px 0;
    font-style: normal;
}

和页面:

<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>

就像我说的那样,我希望它能自动调整到文本,所以"泡泡"就是"你好,我的名字是azzyh".

不像现在这样:http: //img341.imageshack.us/img341/8303/exampleu.png 正如你所看到的那样,浏览器的右端+左端都是如此.

检查图像,您将看到文本所在的行("框"),对于文本来说太大了.我希望css在文本后调整框..所以"行"绕过文本"你好我的名字是"抱歉我的英文

看到这张图片:http: //img17.imageshack.us/img17/6057/exampleph.png "红色"是我想要它的方式..

我怎样才能做到这一点？

谢谢

Answer 1

div 元素是块级元素,默认情况下,它们包含的块将允许向左和向右延伸.

为了获得div自动调整的宽度,您必须使用与放置的相同样式将其转换为内联元素p:display: inline;

请注意,这可能会产生意想不到的副作用,即不会自动将每个强制转换div为新行.但是,如果没有更多信息,我不完全确定你的布局是好还是坏.