【问题标题】:css vertical line between two elements [closed]两个元素之间的css垂直线[关闭]
【发布时间】:2015-02-02 06:18:38
【问题描述】:

我有两个元素一个部分元素和一个旁白元素,旁白元素在我所有的下页中总是相同的,在每个部分中,我的内容长度取决于页面,但我的问题是部分和另外我想在它们之间的中间空间有一条灰色的垂直线。

如果没有包括 Java Script 在内的任何解决方案,我们将不胜感激。

那么有什么建议吗?

编辑:

感谢到目前为止的回复,但我的问题是我希望该行是最长的行的高度,例如在我的起始页上,最长的行是内容,但对于另一个下页,最长的行是一边和一边是在我链接在一起的另一个php文档中,因为在我更改它之前,页面上的内容总是相同的,对不起,这个信息迟到了!

【问题讨论】:

  • 请发布相关代码和/或提供在线示例

标签: html css


【解决方案1】:

border-left: 1px solid #000; 用于正确的元素怎么样?

【讨论】:

    【解决方案2】:

    试试这个:

    <div class="line" >
    Second element
    </div>
    

    在 CSS 中:

    .line {
        border-left: thick solid #ff0000;
    }
    

    【讨论】:

    • 仅供参考:&lt;div&gt; 是容器标签,&lt;/div&gt; 是结束标签 cannot be omitted
    • 是的,谢谢你的评论
    【解决方案3】:

    如果你想要边线的高度(我假设它在左边),那么边上的边框就可以了:

    .aside{
        border-right: 1px solid #666;
    }
    

    如果该行应该是内容的高度,那么应该在内容上留下一个边框:

    .content{
        border-left: 1px solid #666;
    }
    

    如果元素是相反的,那么只需反转使用的边框。

    然后您可能需要添加一些内边距,以便文本不会触及边框,具体取决于您的样式和标记的其余部分。

    【讨论】: