语音气泡的 CSS '+ p' 定位

Question

我使用了几个不同的来源来设计混合 CSS 语音气泡设置，但在每个气泡下的标题定位方面遇到了困难（请参阅下面的屏幕截图以了解它的外观和我想要进行的更改）。

我使用 this 作为气泡本身的灵感，并使用 this 作为将标题显示在气泡下方的灵感 - 在此非常感谢 Joshua Hibbert 和 Nicolas Gallagher 各自的工作。

.bubble + p CSS 看起来非常紧凑，但我无法让它在我的设置中正常工作。我尝试将 position 属性从 relative 更改为 absolute 并再次返回，但都没有按预期工作。 Fiddle here（将 Fiddle 的 Result 滑块向左拖动以查看按预期显示的气泡）。谁能指出我能做什么？我是否正确地假设 CSS 中的 + p 意味着 <p> 元素从气泡元素继承其 CSS？

HTML

  <span class="bubble bubble-left">This is line 1 in speech bubble 1.<br/> 
    This is line 2 in a bubble,<br/> and this is line 3.</span>
    <p>Title for bubble 1</p>

  <span class="bubble bubble-right">This is ine 1 in a speech bubble 2.<br/> 
    This is line 2 in a bubble,<br/> and this is line 3.</span>
    <p>Title for bubble 2</p>

CSS

.bubble {
background-color: #fff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius: 7px;
border: 2px solid #DD4814;
-webkit-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
-moz-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
-ms-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5)); 
-o-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 4px 4px 0 hsla(0,0%,0%,.2);
color: #333;
display: inline-block;
font-family: Ubuntu, sans-serif;
font: 16px/25px;
padding: 15px 25px;
position: absolute;
}

.bubble + p {margin:15px 0 2em 85px; font-style:italic;}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
z-index: 1;
}
.bubble:before {
border-right: 27px solid #DD4814;
border-bottom: 27px solid transparent;
bottom: -29px;
right: 23px;
z-index: 0;
}

.bubble-left {left: 25%;}
.bubble-right {right: 25%;}

Answer 1

我会在您的<p> 内设置语音气泡，然后代码将如下所示：

HTML：

<p>
    Title for bubble 1
    <span class="bubble bubble-left">
        This is line 1 in speech bubble 1.<br/> 
        This is line 2 in a bubble,<br/> 
        and this is line 3.
    </span>
</p>

CSS：

p {
    position: relative;
}

span.bubble {
    position: absolute;
    /* Set width and height in relation to the p */
}