如何创建脸书风格的垂直边框线(布局)?:).

Question

如何使用CSS在两侧（左，右）创建垂直边框线，就像facebook一样？

我已经阅读了几篇关于 Stackoverflow 的文章，但我找不到我想要的......有人知道如何制作垂直线（布局）吗？谢谢:)

脸书

 | contents |
 |          |
 |          | <-these two vertical lines on facebook
 |          |
 |          |

Answer 1

有两个选项：

1. 使用CSS边框并玩盒子阴影
2. 在那里使用图像行

两者都工作正常。我会选择 css 解决方案，但还有其他人创建图像背景并将其放置在主要内容区域后面，然后将所有内容居中放在其顶部。

Answer 2

只需将这些边框和阴影应用于这些边框（您可以更改框阴影值以满足您的需要）。这是一个小提琴

.middle {
    width:400px;
    height:800px;
    border-left:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    margin:0 auto;
    box-shadow: 5px 5px 5px #888888;
}

Answer 3

首先指定内容宽度。 然后使用 保证金 ： 0 自动;它将使您的内容保持在页面中间，两侧相等的空间为空白。然后在内容上放置虚线边框。试试吧。提供您的反馈。

Answer 4

您可以使用

border-right和border-left下面是一个示例

#middle-region{
width: 900px;
min-height: 600px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
margin: auto;
}