<分区>
<分区>
大家好，我试图在我的 2 篇文章之间用一条垂直线填充，但每次我尝试这样做时，它根本不显示这条线，因为我将页面背景设置为蓝色，所以我怎样才能绕过我的背景将线条设置为黑色，以便它显示在背景上。有人有想法吗？
#artworkArticlesLeft{
float:left;
margin: 0;
padding:0;
width:60%;
padding-left:10%;
padding-right:4%;
border-left:
}
#artworkArticlesRight{
padding-right:10%;
}
.verticalLine{
background:black;
width: 0px;
height: 10%;
} <section id="section1">
<div id="artworkArticlesLeft">
<article id="artworkArticle1">
<header>
<h1>Art Work</h1>
</header>
<p>Welcome to the main gallery</p>
</article>
</div>
<div id="artworkArticlesRight">
<div class="verticalLine">
<article id="artworkArticle2">
<p>Welcome to the main gallery</p>
</article>
</div>
</div>
</section>最佳答案
您可以使用 border 来制作一条线带有元素的容器上的属性。使用 border-right: 1px solid black在第一个容器 ( artworkArticlesLeft ) 或 border-left: 1px solid black在第二个容器 ( artworkArticlesLeft ) 上。
使用您当前的样式，这可能看起来不太好，因为第二个容器存在一些定位问题(它的宽度是页面的 100% - 请在浏览器的元素检查器中查看)。您可能需要考虑调整组件的位置或使用 display: flexbox .
关于html - 如何在两篇文章之间制作垂直线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38882337/