CSS'+ p'定位语音泡泡

Question

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

我使用this作为泡泡本身的灵感来源this，因为我的灵感来源于泡泡下面 - 并且非常感谢Joshua Hibbert和Nicolas Gallagher各自的鼓舞。工作。

.bubble + p CSS看起来非常紧凑，但我无法使用我的设置正常工作。我已尝试将position属性从relative更改为absolute然后再将其更改，但两者都无法正常工作。小提琴here（向左拖动小提琴的结果滑块以查看按预期显示的气泡）。任何人都可以表明我能做些什么吗？我是否正确地假设CSS中的+ p意味着<p>元素从bubble元素继承其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 */
}