Question

我似乎无法创建一个将在页面中交叉的垂直和水平线。他们似乎只是互相厮杀。有什么建议？新手在这里，谢谢你们的时间！

#colorstrip {
	height: 0px;
    border-bottom:solid 30px #FF8533;
    margin-left: 100px;
}
#verticalLine {
    border-left: solid 12px #FF4719;
    margin-left: 480px;
    height: 100%;
}

<div id="verticalLine"> </div>
        <div id="colorstrip">

Answer 1

colorstrip正在推动

verticalLine。只需添加position:absolute;即可解决问题。要小心，绝对定位会使事情变得非常混乱非常快。

＆＃13;

#colorstrip {
	height: 0px;
    border-bottom:solid 30px #FF8533;
    margin-left: 100px;
}
#verticalLine {
    position:absolute;
    border-left: solid 12px #FF4719;
    margin-left: 480px;
    height: 100%;
}

＆＃13;

<div id="verticalLine"> </div>
        <div id="colorstrip">

＆＃13;

Answer 2

如果我理解正确，您希望在页面中交叉线以便相遇。设置它的一种方法就是这样。



   #verticalLine{
	position:absolute;
	top:0;
	left:50%;
	width:10px;
	height:100%;
	background-color:#FF4719;
	
}

#colorstrip{
	position:absolute;
	top:50%;
	width:0;
	height:10px;
	width:100%;
	background-color:#FF8533;
	
}
    <div id="verticalLine"></div>
    <div id="colorstrip"></div>

页面上的普通元素表现得像文本一样，两个元素将一个接一个地显示出来。

位置：绝对将div从页面的正常顺序中取出，并将其置于忽略其他所有内容的其他所有内容之上。当您有一个position：absolute元素时，您可以使用top，left，bottom和right来控制它在页面上的位置。

top：0是从顶部开始的0像素，左边：50％从左边开始50％的div。（注意从50％开始并不意味着它以页面为中心）剩下的就是颜色条的大小和颜色。

还有其他方法可以实现这一目标。

Answer 3

我创建了一个bin，基本上有一个父div并为两个子节点放一个css，它是父div下面的垂直和水平线

https://jsbin.com/maxiqetama/edit?html,css,output

如何使水平线和垂直线交叉

3 个答案: