div与垂直线

Question

我需要有关此图片的帮助。如何在css和html中设置它如果有人有时间帮助我，请提前感谢你。

Answer 1

我建议将图片视为一个元素的 background 。然后创建一个仅占用图像左半部分的元素的子元素。为了实现这一目标，孩子需要以下风格：

#child {
  position: relative; /* To position the border in relation to the image parent */
  width: calc(50% - 2px); /* 2px correlates to the width of the border */
  height: 100%; /* To occupy the full height of the image */
}

现在该元素无形地位于图像的左半部分，您可以使用border-right: 2px solid cyan将边框应用于此元素的右侧。

这导致图像中间有一条线，如下所示：

#container {
  width: 300px;
  height: 200px;
  background: url(http://placehold.it/100);
}

#child {
  position: relative;
  width: calc(50% - 2px);
  height: 100%;
  border-right: 2px solid cyan;
}

<div id="container">
  <div id="child"></div>
</div>

希望这有帮助！ ：）

Answer 2

Obisidians回答很好....我要稍微调整一下，删除一个HTML元素并使用:before，保留背景图片，但对线条的处理方式略有不同

＆＃13;

＆＃13;

#container {
  width: 300px;
  height: 200px;
  background: url(http:/fillmurray.com/300/200);
  position:relative;
}

#container::before {
  position: absolute;
  left: calc(50% - 1px);
  width:2px;
  height: 100%;
  background-color:cyan;
  content: '';
}

#container > div
{
  background-color: rgba(255,255,255,0.5);
  padding: 5px;
}

＆＃13;

<div id="container">
  <div>Some Content</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这样您可以更自由地使用儿童内容