边界在DIV的一边

Question

我想在div的右侧有一个边框。

我做：

<div class="span6" style="border-right: 2px solid #727272;">

事情是我喜欢我的边界不要跑到div的顶部和底部。也许从顶部5px和从底部5px。或者div的90％的高度。我该怎么做？

由于

Answer 1

您可以使用伪元素来保持边框。以下将使“border”成为父元素高度的90％：

http://cssdeck.com/labs/kyrvt8hf

div {
  position: relative;
}

div:after {
  display: block;
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: 0;
  border-right: 2px solid red;
}

Answer 2

我可能是错的，但我不相信有任何方法可以真正实现这一点，你可能想要推出。事实上，我想到了三种可能有效的“hacky”方法，但假设变化的高度，这三种方法都无法让你达到理想的状态。

假设一个固定的高度，您可以创建一个2px宽，90％div高度的所需颜色图像，然后将其设置为div的背景图像。类似的东西：

.span6 { background: #fff url(bgBorder.png) no-repeat right center; }

更新

根据Tyblitz在评论中所说的变化。这允许动态高度。我仍然倾向于选择：after选项，因为它可以让你的DOM更清洁，但是如果不可能的话：

http://jsfiddle.net/designingsean/bsbgX/1/

HTML：

<div class="span6">The content div<div class="border"></div></div>

CSS：

.span6 {
  width:50%;
  height:400px;
  background-color:#ddd;
  position:relative;
  padding:10px;
}
.border {
  width:2px;
  background-color:#222;
  position:absolute;
  top:5%;
  bottom:5%;
  right:0;
}

请注意，要使其固定距离（例如，以像素为单位），只需将百分比的顶部和底部更改为所需的px。有关示例，请参阅http://jsfiddle.net/designingsean/bsbgX/2/。

Answer 3

此图片展示了边框的工作方式

您可以设置边距以缩小边框或设置边距以扩展边框。目前CSS中没有选项来定位边框并使其更大或更小（显然不是在谈论宽度）。但是，您可以使用填充，边距，另一个div或伪元素来达到所需的效果。