两个div之间的居中垂直线

一个人

我正在尝试实现以下布局(显然直线除外)

在此处输入图片说明

但是我不确定该怎么做,我尝试在左侧元素上添加一个右侧边框,但是它并未居中。我该怎么办?

这就是我目前所拥有的

 div.contentswrapper {
 	text-align: center;
 	margin: 0 auto;
 	max-height: 720px;
 }

div.pageleft, div.pageright {
 	display: inline-block;
	vertical-align: top;
	overflow: auto;
 }

 div.pageleft, div.pageright {
 	width: 40%;
 	margin-left: 3%;
 	margin-right: 3%;
 }
	<div class="contentswrapper">
	
		<div class="pageleft">
			<h1>Lorem Ipsum</h1>
			<p>
			</p>
			<p>
			</p>
		</div>
		
		<div class="pageright">
			<h1>Lorem Ipsum</h1>
			<p>
			</p>
			<p>
			</p>
		</div>

一个儿子

将边距更改为填充,然后设置边框

div.contentswrapper {
  text-align: center;
  margin: 0 auto;
  max-height: 720px;
}
div.pageleft,
div.pageright {
  display: inline-block;
  vertical-align: top;
  overflow: auto;
}
div.pageleft,
div.pageright {
  width: 40%;
  padding-left: 3%;
  padding-right: 3%;
}
div.pageleft {
  border-right: 2px solid red;
}
<div class="contentswrapper">

  <div class="pageleft">
    <h1>Lorem Ipsum</h1>
    <p>
    </p>
    <p>
    </p>
  </div>

  <div class="pageright">
    <h1>Lorem Ipsum</h1>
    <p>
    </p>
    <p>
    </p>
  </div>
</div>

选项2,使用伪元素及其边框

div.contentswrapper {
  position: relative;
  text-align: center;
  margin: 0 auto;
  max-height: 720px;
}
div.contentswrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  bottom: 0;
  width: 0;
  border-right: 2px solid red;
}
div.pageleft,
div.pageright {
  display: inline-block;
  vertical-align: top;
  overflow: auto;
}
div.pageleft,
div.pageright {
  width: 40%;
  margin-left: 3%;
  margin-right: 3%;
}
<div class="contentswrapper">

  <div class="pageleft">
    <h1>Lorem Ipsum</h1>
    <p>
    </p>
    <p>
    </p>
  </div>

  <div class="pageright">
    <h1>Lorem Ipsum</h1>
    <p>
    </p>
    <p>
    </p>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章