Question

我使用html和css创建了网页。

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

我需要在这两种产品之间添加垂直hr线。

为此我做了，

HTML：

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

的CSS：

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

它没有正常工作，这是我的jsfiddle：http://jsfiddle.net/22z6vjrx/

任何人都可以帮我解决这个问题，

提前致谢.....

Answer 1

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

.product {
  float: left;
  width: 100px;
  height: 200px;
  margin-bottom: 5px;
}
.clear {
  clear: both;
}
.first {
  background-color: #eee;
}
.product:not(:last-child) {
  border-right: 1px solid black;
}
.second {
  background-color: #ddd;
}
.third {
  background-color: #dfd;
}
.fourth {
  background-color: #ddf;
}

<div class='row'>
  <div class='clear'></div>
  <div class="product first"></div>
  <div class="product second"></div>
</div>
<div class='row'>
  <div class='clear'></div>
  <div class="product third"></div>
  <div class="product fourth"></div>
</div>

更新版本 添加box-sizing: border-box;以包含边框和填充到元素宽度（否则将太大，因为它将width + border-width * 2 + padding * 2）。还要确保你有浮动产品div和垂直hr：

.product,
.vhr {
  box-sizing: border-box;
}
.product {
  float: left;
  width: 49%;
  height: 200px;
  margin-bottom: 5px;
}
.first {
  background-color: #eee;
}
.second {
  background-color: #ddd;
}
.vhr {
  float: left;
  border-left: 1px solid black;
  height: 200px;
  width: 1%;
  margin-left: 1%;
}

<div class="product first"></div>
<div class="vhr"></div>
<div class="product second"></div>

html和css中垂直hr行的问题

1 个答案: