Question

我试图让一个圆形div作为一个酒吧的装饰部分，我很难定位圆圈。这个想法是条形和圆形作为一个分区。我想要一个条形，然后在它的末尾有一个圆圈（希望圆圈有文字）。我也试图让它成为一个响应的圈子。我尝试将宽度设置为某个％，然后将高度设置为auto，但这样做效果不佳。这是我的jsfiddle。（http://jsfiddle.net/dbartolome/vzkbjh5h/1/）

到目前为止的HTML和CSS代码：

<div class="divider"><div class="circle"></div></div>

和CSS

div{  
 display: inline-block;
 vertical-align: top;
}

.divider{
 display: block;
 width: 80%;
 background-color: #20ffd0;
 height: 20px;
 text-align: center;
 position: relative;
}

.circle{
 position: relative;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background-color: #BADA55;
 text-align: right;
}

Answer 1

以下是简化版：http://jsfiddle.net/vzkbjh5h/4/

.divider{
 display: block;
 width: 80%;
 background-color: #20ffd0;
 height: 20px;
 text-align: center;
 position: relative;
}


.circle{
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #BADA55;
 float: right;
 margin-right: -10px;
}

Answer 2

不要滥用所有这些课程。水平分隔符是hr元素，您可以使用绝对定位的:after伪元素将圆圈放得很好。

<hr>所需的所有CSS：

hr {
  width: 80%;
  background-color: #20ffd0;
  height: 20px;
  border:0;
  position: relative;
  margin:50px auto;
}
hr:after {
  content:'';
  position: absolute;
  right:0;
  top:-40px;
  width:100px;
  height:100px;
  border-radius: 50%;
  background-color: #BADA55;
}

top:-40px将圆圈和条形的组合高度校正为垂直居中，而margin本身的hr为其提供了“呼吸空间”＆＃39;到其他内容。

如果您不想像这样设置所有横向规则，您当然也可以将其应用于hr.big或其他内容。

Sample here

Answer 3

您可以将.circle绝对定位到栏中。这是更新后的fiddle

我已将.circle更改为

.circle{
 position: absolute;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background-color: #BADA55;
 text-align: center;
 left: 100%;
 top: -80px;
 line-height: 100px;
}

调整top参数以更改圆的垂直位置。 Line-height等于圆的高度，使文本垂直居中。 Text-align: center;用于横向。

Answer 4

我喜欢<hr>答案，但这里也是一个选项： http://jsfiddle.net/dianaavila/jr91mub8/1/

<div id="work">
 <div class="divider"></div>
 <div class="circle"></div>
 ....
</div>

.circle{
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #BADA55;
  text-align: right;
  float:right;
  margin-top:-45px;

}

.divider{
 display: block;
 width: 80%;
 background-color: #20ffd0;
 height: 20px;
 text-align: center;
 position: relative;
 float:left;
}

我从.divider容器中取出.circle。分别左右浮动它们。为圈子添加了一个负余量。

如何在另一个充当条形的div的末尾放置一个圆形div？

4 个答案: