Question

我需要在页面中间有一条垂直线，上面我已经水平了。我真正想要的是一条与这条水平线相同风格的垂直线。

import numpy as np
original_data = np.arange(0,16000, dtype = np.float32)
new_data = [i/max(original_data) for i in original_data]
print('done')

怎么可能这样做？

编辑：

以下代码有效，但我不能添加任何东西，直到垂直线结束，从它结束的点我可以添加东西但不是之前。

我正在尝试在垂直线的右侧和左侧添加内容。我怎么能解决它？

Answer 1

这是在页面中间始终显示固定垂直线的示例。没有其他元素会向上或向下移动它。

.vline
{
    position:fixed;
    top:0;
    left:50%;
    bottom:0; margin:0;
    border:none;
    border-right:solid 1px black;
    z-index:10;
}

<hr class="vline" />

更新：根据您的修改，有一个示例。如果这就是你需要的。两个divs浮动left和right，包含一些padding和垂直分隔线（hr）

body, html {margin:0;padding:0;}
.dleft, .dright
{
    display:inline;
    width:calc(50% - 20px); /*50% width minus 2xpadding = 20px*/
    padding:10px;
}
.dleft
{
    float:left;
    background-color:yellow;
}
.dright
{
    float:right;
    background-color:lightblue;
}
.vline
{
    position:fixed;
    top:0; bottom:0;
    left:50%;
    border:none;
    border-right:solid 1px black;
    z-index:10;
    margin:0;
}

<hr class="vline" />
<div class="dleft">
    aslkjfklasdjfsadlkf
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
    asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
</div>
<div class="dright">
    aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
    aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
    aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
</div>
<div style="clear:both;"></div>

Answer 2

这是我做过的一个快速例子。这是实现这一目标的一种方式。

<div class="verticalLine"></div>

.verticalLine {
    background-color: #000;
    height: 100vh;
    margin: 0 auto;
    width: 1px;
}

<强> Example 1

另一种方法是使用这样的绝对位置：

.verticalLine {
    background-color: #000;
    height: 100%;
    left: 50%;
    position: absolute;
    transform: transitionX(-50%);
    top: 0;
    width: 1px;
}

<强> Example 2

没有高度属性的第三种方式

.verticalLine {
    background-color: #000;
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: transitionX(-50%);
    top: 0;
    width: 1px;
}

<强> Example 3

Answer 3

由于HTML中的元素是从上到下呈现的，因此无法像使用<hr>一样轻松添加垂直线。一种方法是将页面拆分为两个<div>并将边框添加到两个<div>之一，如下所示：

＆＃13;

.left-col {
  width: 50%;
  min-height: 200px;
  border-right: 1px solid black;
  float: left;
  box-sizing: border-box;
}

.right-col {
  width: 50%;
  min-height: 200px;
  float: right;
}

＆＃13;

<div class='page'>
  <div class='left-col'>
    Content in the left column
  </div>
  <div class='right-col'>
    Content in the right column
  </div>
</div>

＆＃13;

您也可以使用display: inline-block代替float: right，但是在占据100％宽度的一部分空间时会遇到一些问题（因此您无法使用50％+ 50 ％divs不使用hacks）。 CSS-Tricks有一些information on inline-block。

根据您是否需要垂直线右侧的内容，您当然可以完全跳过.right-col。

box-sizing: border-box将1px边框计数作为宽度的一部分，这样我们就可以得到50％+ 50％= 100％。

页面中间的垂直线

3 个答案: