提问人：beli3ver 提问时间：7/14/2017 最后编辑：Robertbeli3ver 更新时间：7/14/2017 访问量：80
Circle 和 Divs
Circle and Divs
问：
我试图创建一个小时间线。在左边的圆圈上写着年份，直接在右边的网站上写着发生了什么。
<div class="circle-singleline">
2017
</div>
<div class="text">
sdfs df sdfg sdf gsd fg sdf g sdfg sdfg sdfg
</div>
<div class="circle-singleline">
2016
</div>
<div class="text">
sdfs df sdfg sdf gsd fg sdf g sdfg sdfg sdfg
</div>
<div class="circle-singleline">
2015
</div>
<div class="text">
sdfs df
sdfg sdf gsd fg sdf g sdfg sdfg sdfg
</div>
CSS的
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
div {
margin: 20px;
}
.circle-singleline {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 15px;
line-height: 50px;
text-align: center;
border: 2px solid #646464;
color: #000;
}
.text {
border: 1px solid #646464;
padding: 5px;
position: absolute;
top: 5px;
left: 75px;
}
https://jsfiddle.net/ubgjbpog/
现在我有 2 个问题：
1） 我怎样才能将正确站点上的每个文本框设置为圆圈？
2）如何在左侧获得一个小箭头？
谢谢
答：
1赞
Brainmaniac
7/14/2017
#1
你有位置：绝对在那里..这不是最好的方法。
在每个“包”周围放置一个包装器，并将包装器中的内容显示为内联块。
关于箭头，我不知道你在追求什么，但你可以先在包装器 div 中添加另一个元素，然后让它显示：inline-block 以及它，它最终会出现在圆圈的左侧。
<div class="wrapper">
<div class="arrow">
</div>
<div class="circle-singleline">
Inside Circle
</div>
<div class="text">
Inside textBox
</div>
</div>
CSS：
.wrapper + .wrapper{
margin-top: 10px;
}
.circle-singleline {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 15px;
line-height: 50px;
text-align: center;
border: 2px solid #646464;
color: #000;
}
.text {
position: relative;
display: inline-block;
border: 1px solid #646464;
padding: 5px;
left: 10px;
}
.arrow{
display: inline-block;
}
在这里工作小提琴（不带箭头）https://jsfiddle.net/ubgjbpog/4/
1赞
Robert
7/14/2017
#2
你的问题有几个可能的答案，特别是在考虑像你提到的箭头这样的设计方法时。我会用略有不同的语法来解决这个问题：
.circle-timeline,
.circle-timeline .item {
overflow: hidden;
width: 100%;
}
.circle-timeline,
.circle-timeline .item,
.circle-timeline .year,
.circle-timeline .text {
box-sizing: border-box;
}
.circle-timeline .item {
margin: 10px 0;
}
.circle-timeline .year,
.circle-timeline .text {
float: left;
padding: 15px 0;
background: #fff;
border: 1px solid #ccc;
}
.circle-timeline .year {
text-align: center;
width: 50px;
border-radius: 999px;
position: relative;
z-index: 2;
}
.circle-timeline .year:after {
position: absolute;
content: " ";
width: 0;
height: 0;
right: -6px;
top: 40%;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #cccccc;
}
.circle-timeline .text {
padding: 5px;
padding-left: 40px;
margin: 10px;
margin-left: -25px;
border-radius: 6px;
width: calc(100% - 50px);
}<div class="circle-timeline">
<div class="item">
<div class="year">2017</div>
<div class="text">Lorem ipsum dolor sit amet...</div>
</div>
<div class="item">
<div class="year">2016</div>
<div class="text">Lorem ipsum dolor sit amet...</div>
</div>
<div class="item">
<div class="year">2015</div>
<div class="text">Lorem ipsum dolor sit amet...</div>
</div>
</div>我不确定这里的风格化时尚是否是您想要的，但它用于对齐每个年份/文本，并且箭头被生成为伪类。float.item:after
评论
0赞
beli3ver
7/14/2017
感谢您的代码，是否可以添加jquery，当您将鼠标移到圆圈上时，文本框和箭头会滑出
0赞
Robert
7/14/2017
你当然可以使用jQuery甚至CSS来制作这种效果。我把它留给你 - Stack Overflow 与其说是代码编写服务，不如说是代码修复/推荐服务。
0赞
beli3ver
7/14/2017
谢谢。我将尝试使用jquery。
0赞
beli3ver
7/14/2017
$(".year").hover(function() { $(this).next( ".text" ).show() }); $(".year").mouseleave(function() { $( ".text" ).hide(); });这奏效了。谢谢
0赞
VictorGodoi
7/14/2017
#3
1） 我怎样才能将正确站点上的每个文本框设置为圆圈？
您添加到的样式：.text
position: absolute;
top: 5px;
left: 75px;
会使它们都从元素的顶部开始 5px 和从元素的左侧开始 75px 并堆叠在一起 - 你可以注意到，在你的小提琴中，这就是为什么似乎只有一个元素。在这种情况下使用是非常不建议的，因为它的工作方式：body.textposition: absolute
绝对值： 该元素已从正常文档流中删除;不会为页面布局中的元素创建空间。相反，它相对于其最接近的祖先（如果有）定位;否则，它将相对于初始包含块放置。它的最终位置由上、右、下和左的值决定。当 z-index 的值不是 auto 时，此值将创建新的堆叠上下文。绝对定位的框可以有边距，并且它们不会与任何其他边距一起折叠。（摘自MDN。 )
换句话说，如果你继续使用 ，你将不得不手动调整每个元素的位置，每个元素都必须接收不同的值，并且每次元素的内容改变其大小时，你都必须改变它。此外，这个解决方案根本没有响应，因为不同的设备、浏览器等可能会以不同的方式呈现元素，而您必须手动定位元素的所有工作都可能是徒劳的。你最终会完成CSS本身做得很好的工作。position: absolute.texttopleft.text
我解决这个问题的最佳建议是将所有对 和 包装在另一个中：.circle-singleline.textdiv
<div class="item">
<div class="circle-singleline">2011</div>
<div class="text">Text for 2011 goes here.</div>
</div>
<div class="item">
<div class="circle-singleline">2012</div>
<div class="text">Text for 2012 goes here.</div>
</div>
<div class="item">
<div class="circle-singleline">2013</div>
<div class="text">Text for 2013 goes here.</div>
</div>
CSS是这样的：
div.item{
margin: 20px;
width: 100%;
}
div.item > .circle-singleline {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 15px;
line-height: 50px;
text-align: center;
border: 2px solid #646464;
color: #000;
}
div.item > .text {
display: inline-block;
border: 1px solid #646464;
padding: 5px;
}
正如元素默认的那样，我们添加它们，以便它们可以彼此相邻。divdisplay: blockdisplay: inline-block
2）如何在左侧获得一个小箭头？
现在，时间轴的每一年都有一个换行元素，您可以向其添加一个包含所需箭头的换行元素，如下所示：:before
div.item:before {
display: inline;
content:'\003E';
}
检查此 JSFiddle 与所有这些解决方案。
评论
display: inline-block