请在这里查看我的代码。
http://jsfiddle.net/xymgwonu/3/
代码工作正常，直到添加新的div <div class="bubble"> </div>。它弄乱了我的整个设计。我正在尝试使气泡与水平线对齐，但它使b / w圆与下面的垂直线形成间隙。
答案 0 :(得分：1)
在这里，请尽情享受:) http://jsfiddle.net/xymgwonu/13/
.bubble {position:absolute; margin-top: -40px;}
答案 1 :(得分：0)
HTML：
Picasso.with(mContext).load(sliderImagesId.get(i).getImageId()).error(R.drawable.microtube).into(photoView);
CSS：
<div class="group">
<div class="vl"></div>
<div class="circle"> </div>
<hr class="hr" />
<div class="bubble"></div>
</div>
<div class="group">
<div class="vl"></div>
<div class="circle"> </div>
<hr class="hr" />
<div class="bubble"></div>
</div>
<div class="group">
<div class="vl"></div>
<div class="circle"> </div>
<hr class="hr" />
<div class="bubble"></div>
</div>
您可以为每个项目复制.group {
padding:10px;
}
.vl {
margin-left: 50px;
padding: 50px;
position: relative;
border-left: 5px solid blue;
}
.circle {
color: white;
margin-left: 46px;
width:10px;
height:10px;
border: 2px solid #666666;
border-radius: 50%;
z-index:2
}
.hr {
margin-left: 60px;
margin-top: -10px;
width: 250px;
border-top: 5px solid #ccc;
}
/* This is for the cloud */
.bubble {
position: relative;
margin-top:-40px;
margin-left:340px;
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 100px;
width: 275px;
}
.bubble::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4);
content: "\00a0";
display: block;
overflow: auto;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate( 45deg);
-moz-transform: rotate( 45deg);
-ms-transform: rotate( 45deg);
-o-transform: rotate( 45deg);
-webkit-transform: rotate( 45deg);
width: 20px;
}