我正在尝试实现以下布局(显然直线除外)
但是我不确定该怎么做,我尝试在左侧元素上添加一个右侧边框,但是它并未居中。我该怎么办?
这就是我目前所拥有的
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] 删除。
我来说两句