5

我想这样做气泡的大小，在 div 内的文本（评论）之后自动调整。首先是代码：.bubble { font-size: 12px; 边距底部：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 “红色”是我想要的样子。

我怎样才能做到这一点？

谢谢

4

3 回答 3

6

div元素是块级元素，默认情况下，它们的包含块允许向左和向右伸展。

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

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

于 2010-02-25T18:28:49.993 回答
2

通过应用以下 CSS 解决了我遇到的类似问题：

display:inline-block;

我希望链接看起来像一个按钮，但不扩展背景以填充包含 DIV 的宽度。

几乎所有浏览器都支持，包括在 IE6 和 IE7 中的部分支持，但仅在元素默认为“内联”的情况下。有一些替代属性可以获得跨浏览器支持。Google Code上也有一些setInlineBlock 的内容，但我自己没有尝试过。

于 2013-03-14T14:55:11.653 回答
0

移动您的边框属性

border: 1px solid #c9c2c1;

从

.bubble blockquote {}

进入你的

.bubble blockquote p {}

那应该把盒子放在你想要的地方。

于 2012-03-09T20:06:35.320 回答