Question

我试图创建一个小时间轴。在带有年份的左侧圆圈上，直接在右侧网站上显示正在发生的文本。

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

CSS

prefix

https://jsfiddle.net/ubgjbpog/

现在我有两个问题：

1）如何将右侧网站上的每个文本框设置为圆圈？

2）如何在左侧看到一个小箭头？

由于

Answer 1

你有位置：绝对那里..这不是最好的方式。

在每个＆＃34;包裹周围放一个包装物＆＃34;并将包装中的内容显示为内联块。

关于箭头我不知道你在追求什么，但你可以先在包装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/

Answer 2

您的问题有几个可能的答案，特别是在考虑您提到的箭头等设计方法时。我会用稍微不同的语法来处理它：

＆＃13;

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

＆＃13;

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

＆＃13;

我不确定这里的程式化风格是否符合您的要求，但它使用float来对齐每个.item中的年份/文字，并生成箭头作为伪班:after。

Answer 3

1）如何将右侧网站上的每个文本框设置为圆圈？

您添加到.text的样式：

position: absolute;
top: 5px;
left: 75px;

将使所有这些元素从顶部开始是5px，从body元素的左边开始是75px并叠加在一起 - 你可以注意到在你的小提琴中，这就是为什么那里似乎只有一个.text元素。由于其工作方式，在这种情况下使用position: absolute是非常不受欢迎的：

<强>绝对：该元素从正常文档流中删除;没有为页面布局中的元素创建空间。相反，它相对于其最近定位的祖先（如果有的话）定位;否则，它相对于初始包含块放置。它的最终位置由顶部，右侧，底部和左侧的值决定。当z-index的值不是auto时，此值将创建新的堆栈上下文。绝对定位的盒子可以有边距，并且它们不会与任何其他边缘一起折叠。（取自MDN。）

换句话说，如果您继续使用position: absolute，则必须手动调整每个.text到top和left的定位，每个元素必须收到不同的值，并且每次.text元素的内容更改其大小时，您都必须更改它。此外，这个解决方案根本没有响应，因为不同的设备，浏览器等可能会以不同的方式呈现元素，并且您必须手动定位元素的所有工作都可能是徒劳的。你最终会做一份CSS本身做得很好的工作。

我要解决此问题的最佳建议是将所有.circle-singleline和.text对包装在另一个div中：

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

由于div元素默认为display: block，我们会添加display: inline-block，以便它们可以彼此相邻。

2）如何在左侧看到一个小箭头？

既然你的时间轴的每一年都有一个包装元素，你可以添加一个:before，包含你想要的箭头，如下所示：

 div.item:before {
    display: inline;
    content:'\003E';
 }

使用所有这些解决方案检查此JSFiddle。

圆和分

3 个答案: