Question

Hello Guys我试图在我的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>

Answer 1

您可以在带有文章的容器上使用border属性来创建一行。在第一个容器（border-right: 1px solid black）上使用artworkArticlesLeft或在第二个容器（border-left: 1px solid black）上使用artworkArticlesLeft。

使用您当前的样式，这可能看起来不那么好，因为第二个容器存在一些定位问题（它的宽度是页面的100％ - 请参阅浏览器的元素检查器）。您可能需要考虑调整组件的位置或使用display: flexbox。

Answer 2

要显示div，您需要至少1px的宽度。此外，CSS中的颜色通常指文本颜色。您可以使用background-color或仅使用background。

https://jsfiddle.net/kmd6d9n4/

如何在2篇文章之间做出垂直线？

2 个答案: