html和css中垂直hr行的问题

我已经创建了使用html和css的网页

我在一列中创建了两个产品

我需要在这两个产品之间添加垂直人力资源线

为此我做了

Html:

它不能正常工作，这是我的JSFIDLE：

谁能帮我修一下吗

---

提前感谢….

您必须浮动所有div或内联块显示。但我更喜欢在元素右侧添加垂直线作为边框：

.产品{ 浮动：左； 宽度：100px； 高度：200px； 边缘底部：5px； } .清楚{ 明确：两者皆有； } .首先{ 背景色：eee； } .产品：非：最后一个孩子{ 右边框：1px纯黑； } .第二{ 背景色：ddd； } .第三{ 背景色：dfd； } .第四{ 背景色：ddf； }

---

你能简化代码并告诉我们这个问题吗？有很多CSS。到底是什么问题？我在右边看到了一个边框。更具体地说，+3000行css对一件事没有帮助。你到底想实现什么？但你的问题不是垂直对齐，而是产品彼此相邻…我们不是为你编码。删除您的，并尝试它的方式@Justinas解释，然后再次询问，当它仍然不工作；我需要像这样。。我无法更改现有的代码。我有一个疑问，是否可以使用html、css和jquery共享我的网页文档？请引导我，我发布了新问题，但我只得到了否决票。@chinna你的意思是共享源代码，或者把所有东西都放在服务器上，这样ppl就能看到了contents@Justinas：我的意思是，需要像这样的链接，，，这是图片。。

<div class="headerDivider"></div>

.headerDivider {
     border-right:1px solid #16222c; 
     height:400px;
     margin-right: 458px;
     overflow:hidden;
}