我正在尝试重新创建:
我已经完成了讲话泡泡,但我不知道如何将蓝点恰好定位在讲话泡泡高度的50%(讲话泡泡的高度可以变化)和10px左侧
这是我开始的JSFiddle:http://jsfiddle.net/ghpCr/
HTML:
<div class="speech-bubble">
Sample Text.
</div>
<div class="speech-bubble">
Here's a <br /> bigger bubble.
</div>
<div class="dot"></div>
CSS:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.dot {
width: 13px;
height: 13px;
background-color: #44769d;
border-radius: 50%;
}
.speech-bubble {
position: relative;
min-height: 20px;
padding: 15px;
width: 250px;
margin: 10px 0 10px 18px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.speech-bubble:after, .speech-bubble:before {
position: absolute;
right: 100%;
display: inline-block;
border: solid transparent;
content: "";
height: 0;
width: 0;
pointer-events: none;
}
.speech-bubble:before {
border-color: rgba(204,204,204,0);
border-right-color: #ccc;
border-width: 9px;
top: 50%;
margin-top: -9px;
}
.speech-bubble:after {
border-color: rgba(255,255,255,0);
border-right-color: #fff;
border-width: 8px;
top: 50%;
margin-top: -8px;
}
答案 0 :(得分:2)
这个想法是将点正好放在左边,这是通过right: 100%;
实现的。接下来,您需要将其移动一点距离,因此margin-right: 10px;
。现在对于垂直对齐,我们使用类似的方法。
.dot {
// ...
right: 100%;
margin-right: 10px;
top: 50%;
margin-top: -6.5px;
}
另请注意,点必须是讲话泡泡的子元素。我在实际标记出现之前发布了这个答案。
答案 1 :(得分:0)
最好将组放在容器中,这样您就可以轻松控制该容器内每个元素的位置。
<div class="speech-bubble-container">
<div class="dot"></div>
<div class="speech-bubble">
Here's a <br /> bigger bubble.<br/>
</div>
</div>
答案 2 :(得分:0)
您可以使用显示表,试试这个:
的 demo 强>
<div class="level1">
<div class="level2">
<div class="dot"></div>
<div class="speech-bubble">
Sample Text.
</div>
</div>
</div>
.level1 {
display: table-row;
}
.level2 {
display: table-cell;
overflow:hidden;
position:relative;
}
.dot {
width: 13px;
height: 13px;
background-color: #44769d;
border-radius: 50%;
position:absolute;
top:42%; /* or use top:50%;margin-top:-6.5px; */
left:2%;
}
.speech-bubble {
position: relative;
min-height: 20px;
padding: 15px;
width: 250px;
margin: 10px 0 10px 20px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.speech-bubble:after, .speech-bubble:before {
position: absolute;
right: 100%;
display: inline-block;
border: solid transparent;
content:"";
height: 0;
width: 0;
pointer-events: none;
}
.speech-bubble:before {
border-color: rgba(204, 204, 204, 0);
border-right-color: #ccc;
border-width: 9px;
top: 50%;
margin-top: -9px;
}
.speech-bubble:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 8px;
top: 50%;
margin-top: -8px;
}