我正在尝试使用CSS将一些动态生成的内容div与一行连接起来。每三个div一行会弯曲,将箭头图像附加到其结尾,然后用额外的行分割内容。
有没有人知道如何实现这一目标? (我的CSS3经验非常有限(几乎没有),但我认为它可能有类似的功能)
我尝试在div之间添加一个固定高度的元素,但这必须非常硬编码,可能不是一个可行的解决方案。
请记住,“箭头”可以是一个简单的图像,因此绘制不是问题。这是我无法做到的“绿线”代表。
我正在努力实现的图形表示:
答案 0 :(得分:0)
混合以下内容应该可行:
这是一个简单的代码,应该让你去(注意它只是一个概念,如果你想要更多的前/后元素,你应该将它们添加为列表元素子):
HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
body {
text-align: center;
}
ul {
display: inline-block;
margin: 0 auto;
list-style-type: none;
}
ul li {
position: relative;
float: right;
border: solid 1px #000;
margin: 5px;
width: 50px;
height: 50px;
}
ul li:after {
content: '';
position: absolute;
top: 50%;
right: -11px;
width: 11px;
height: 5px;
background: green;
}
li:before {
content: '';
position: absolute;
top: 50%;
left: -11px;
width: 11px;
height: 5px;
background: green;
}
li:nth-child(3n+1) {
margin-bottom: 60px;
clear: right;
}
li:nth-child(3n+1):before {
content: ''; <!-- possibly your image url -->
}
直播:http://jsfiddle.net/bartkarp/nd39pwh3/
随意询问您是否有任何问题或某些内容不够明确:)