如何在两个div之间设置垂直边框？答案

【问题标题】：How to set a vertical border in between two divs?如何在两个div之间设置垂直边框？
【发布时间】：2017-10-24 05:17:55
【问题描述】：

我遇到了两个divs 之间的边界问题，所以我尝试了几段不同的代码，看看它是否能满足我的需求；例如，我尝试在divs 之间使用新的<div > 我希望垂直边框位于其中，但我认为我输入的信息不正确。我知道您还必须将代码添加到您的 CSS 表中，但它到底应该是什么样子？正确的方法是什么？

考虑到这段代码：如何在#content 和#sidebar 之间添加一条垂直线？如果它有文本，你可以说它是一条分隔两个元素的垂直线。

<div id="container">
        <div id="header">
            header content here
        </div>

        <div id="content">
            main content here
        </div>

        <div id="sidebar">
            sidebar content here
        </div>

        <div id="footer">
            footer content here
        </div>

    </div>

=============CSS============

#container {
    width: 960px;
    margin: 20px auto;
}

#header {

}

#content {
    float: left;
    width: 620px;
}

#sidebar {
    float: left;
    width: 340px;

}

footer {
    clear: both;
}

这是有关此代码在文本中的外观的图像。 Example with text of code given above

所以基本上，我想弄清楚如何在左段和右段之间添加边框。

我希望它可以理解并且我的问题足够清楚。

谢谢，

【问题讨论】：

有一个很酷的 CSS 属性叫做border-left 和border-right，看看它并解决你的问题：w3schools.com/cssref/pr_border-left.asp

标签： html css border

【解决方案1】：

您可以在#sidebar 中使用border-left-style: solid; 或在#content 中使用border-right-style: solid;

【讨论】：

添加border-left-style:solid; to #sidebar 使侧边栏位于内容下方，而不是位于侧面。与border-right-style 相同的东西：solid;但我决定使用border-right-style:solid;在我的#content 中并更改我的#sidebar 的宽度，它就起作用了。谢谢！

【解决方案2】：

我有一个想法，但我不确定它的效果如何。将“名字”输入作为一个 div 放入“立即访问”按钮，并定义一个左边框 css 属性，如下所示：

`.mydiv{ 左边框：厚双 #777; }`

【讨论】：