两个div

Question

我正在尝试实现以下布局（显然除了直线）

但是我不确定如何，我尝试在左侧元素上添加右边框，但它不是居中的。我该怎么做呢？

这就是我现在所拥有的

＆＃13;

＆＃13;

 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%;
 }

＆＃13;

	<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您并非真的需要使用inline-block，您可以将它们浮动并设置左div的右边框。

将边距设置更改为填充将改为轻微的中心偏差，因为您的总宽度不会达到完美的100％。

此外，您不需要使用相同选择器的2个样式规则，您可以将它们组合在一起。

＆＃13;

＆＃13;

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

.pageleft { border-right:2px solid black;}

div.pageleft, div.pageright {
 	float:left;
	vertical-align: top;
 	width: 42%;
 	padding-left: 3%;
 	padding-right: 3%;
 }

＆＃13;

<div class="contentswrapper">
	
		<div class="pageleft">
			<h1>Lorem Ipsum</h1>
			<p>sdfff</p>
			<p>sdfsdfsd</p>
		</div>
		
		<div class="pageright">
			<h1>Lorem Ipsum</h1>
			<p>sdfff</p>
			<p>sdfsdfsd</p>
		</div>

＆＃13;

＆＃13;

＆＃13;