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上相同的样式将其转换为内联元素：{{ 1}}

请注意，这可能会产生意想不到的副作用，即不会自动强制每个display: inline;到新行。但是，如果没有更多信息，我不能完全确定你的布局是好还是坏。

Answer 2

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

display:inline-block;

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

几乎所有浏览器都支持，包括IE6和IE7中的部分支持，但仅限于元素默认为“内联”的情况。有一些alternative properties可以获得跨浏览器支持。 Google Code for setInlineBlock上还有一些内容，但我自己没试过。

Answer 3

移动边框属性

border: 1px solid #c9c2c1;

来自

.bubble blockquote {}

进入你的

.bubble blockquote p {}

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

CSS自动调整不是全宽问题

3 个答案: