箱子的行和专栏的背景图象

Question

标题不是很具描述性，但基本上我想用HTML和CSS创建这样的东西：

我可以通过在div中包装第一行框并将该背景图像设置为该行来进行水平线，但我不确定如何对框的列进行分组并在后面添加一条垂直线它们。

感谢任何帮助！

Answer 1

在这里你DEMO

<div id="container">

    <div id ="horizontal">
        <div id="border2"></div>
    </div>
    <div id="vertical">
        <div id="border"></div>
    </div>

</div>

#container {background: black;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position:relative
}

#vertical {background: white;
    position: absolute;
    width: 70px;
    left: 40%   ;
    height: 300px;
    top:0;
}


#horizontal {background: white;
    position: absolute;


    height: 60px;
    top:40%;
    left:0;
    width: 100%;
}

#border {
    width: 100%;
    height: 150px;

    margin-top: 60px;

    border-top: 2px dashed black;
    border-bottom: 2px dashed black;
}

#border2 {
    width: 80%;
    height: 60px;


    border-right: 2px dashed black;
}