我想要：

>生活在任意任意div
>看起来像一个带有文本的中心框
>只需要适合文本(如果小于指定的最大宽度)或包装文本(如果较大)
具有居中或左对齐(或组合)文本,取决于闪光灯(例如,短错误居中;较长的新手介绍左对齐);一个额外的CSS类(例如’flash info left’)来支持这一点
>在页面上彼此相邻的多个闪烁(如示例)中播放很好
>优选地由文本周围的单个元素组成,而不是包装元素内的元素内的文本
>最好是YUI CSS兼容和纯CSS(不是JS)
>在IE7上工作,FFx 3,Safari 3;在旧版浏览器上工作“足够好”

我为此看到的大部分CSS并没有做到这一点.大多数指定一个固定的宽度,这意味着它被包装不好或者填充太多了.

我该怎么做？ (或者,为什么不能？)

这是我现在的CSS：

<div class="flash info">
  <span class="close"><a href="AJAX callback">X</a></span>
  Some informational text here that can be closed w/ the X
</div>
<div class="flash error">
  Some other simultaneous error
</div>

.flash {
    text-align: center;
    padding:    .3em .4em;
    margin:     0 auto .5em;
    clear:      both;
    max-width:  46.923em; /* 610/13 */  
    *max-width: 45.750em; /* 610/13.3333 - for IE */
}

.flash.error {
    border: thin solid #8b0000;
    background: #ffc0cb;
}

.flash.notice,.flash.info {
    border: thin solid #ff0;
    background: #ffe;
}

.flash.warning {
    border: thin solid #b8860b;
    background: #ff0;
}

.flash .close {
    float:  right;
}

.flash .close a {
    color:              #f00;
    text-decoration:    none;
}

奖金积分：我通过下面的工具提示代码实现了我只想要的部分;即不能包装.

由于某种原因,除非指定了nowrap或width,否则默认值的宽度非常小.我不知道为什么,或者如何使它只是包装在一个特定的,更宽的宽度(如我想要发生在闪光).

Some text with <span class="tooltip">info <span>i can has info?</span></span> about a word

.tooltip {
  position: relative; /*this is the key*/
    background-color: #ffa;
}

.tooltip:hover{
    background-color: #ff6;
}

.tooltip span {
    display: none
}

.tooltip:hover span { /*the span will display just on :hover state*/
    z-index:        1; 
    display:        block;
    position:       absolute;
    top:            1.6em; 
    left:           0;
    border:         thin solid #ff0;
    background:     #ffe;
    padding:        .3em .6em;
    text-align:     left;
    white-space:    nowrap;
}

谢谢！

> Sai