如何創建Facebook風格的垂直邊框線（布局）？ :)

Question

如何使用CSS在兩側（左側，右側）像Facebook上創建垂直邊框線？

我已經閱讀了關於Stackoverflow的幾篇文章，但是我找不到我想要的東西……有人知道如何制作垂直線（布局）嗎？ 謝謝 ：）

臉書

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

Answer 1

有兩種選擇：

1. 使用css邊框，也可以玩盒子陰影
2. 在那使用圖像線

兩者都很好。 我會選擇CSS解決方案，但是還有其他人創建圖像背景並將其放置在主要內容區域的后面，然后將所有內容置於其頂部。

Answer 2

首先指定您的內容寬度。 然后使用margin：0 auto; 它將使您的內容保持在頁面中間，兩邊相等的空白。 然后在內容上添加虛線邊框。 試試吧。 提供您的反饋。

Answer 3

只需在這些邊界上應用邊框和陰影即可（您可以更改框陰影值以適合您的需求）。 這是一個小提琴

.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 4

您可以使用border-right和border-left這是下面的示例

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