CSS自动调整不是全宽问题

发布于 2024-08-22 13:16:39 字数 1251 浏览 13 评论 0原文

我想这样做，气泡的大小是在 div 内的文本（评论）之后自动调整的。首先是代码：。气泡 { 字体大小：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 “红色”就是我想要的样子..

我该怎么做？

谢谢

原文

I want to do so the size of the bubble, is auto-adjusting after the text(comment) which is inside the div..
Firstly heres the code:
.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;
}

And the page:

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

Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..

Not like how it is now:
http://img341.imageshack.us/img341/8303/exampleu.png
As you see it goes all out to the browser's right+left end..

Check the image, you'll see the line (the "box") where the text is, are too big for the text. I want css to adjust the box after the text.. so the "lines" gets around the text "hello my name is" sorry for my english

See this image:
http://img17.imageshack.us/img17/6057/exampleph.png
The "red" is how i want it to be..

How can i do this?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

转角预定愛 2024-08-29 13:16:39

div 元素是块级元素，默认情况下，它们会在其包含的块允许的范围内尽可能向左和向右拉伸。

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

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

回复收藏 0 原文

风透绣罗衣 2024-08-29 13:16:39

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

display:inline-block;

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

几乎所有浏览器都支持，包括 IE6 和 IE7 中的部分支持，但仅限于元素默认为“内联”的情况。有一些替代属性来获得交叉- 浏览器支持。 Google Code for setInlineBlock 上也有一些内容，但是我自己还没有尝试过这个。

A similar problem I had was solved by applying the following CSS:

display:inline-block;

I wanted a link to look like a button but not expand the background to fill the width of the containing DIV.

Supported in nearly all browsers, including partial support in IE6 and IE7 but only where element has 'inline' as a default. There are some alternative properties to gain cross-browser support. There is also something on Google Code for setInlineBlock, but I haven't tried this myself.

回复收藏 0 原文