在div旁边塑造

时间:2013-07-18 00:20:44

标签: html css css3 twitter-bootstrap

我正在尝试重新创建:

http://i.imgur.com/46DlQBd.png

我已经完成了讲话泡泡,但我不知道如何将蓝点恰好定位在讲话泡泡高度的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;
}

3 个答案:

答案 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>

演示:http://jsfiddle.net/ghpCr/4/

答案 2 :(得分:0)

您可以使用显示表,试试这个:

demo

HTML

<div class="level1">
 <div class="level2">
  <div class="dot"></div>
  <div class="speech-bubble">
    Sample Text.
  </div>
</div>
</div>

的CSS

.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;
}