* {margin:0padding:0}
div {width:404pxheight:404pxborder-top:solid 1px #000border-left:solid 1px #000}
ul {width:100pxlist-style:noneborder-right:solid 1px #000float:left}
li {height:100pxborder-bottom:solid 1px #000}
DIV布局如下：
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
将以上代码复制黏贴，宽、高可自行设定。
*{margin:0
padding:0
}
html,body{
height:100%
}
.line1,.line4{
position:absolute
width:100%
height:50px
z-index:5
}
.line1{
top:0
}
.line2{
position:relative
height:50%
z-index:1
}
.line3{
position:relative
height:50%
z-index:1
}
.line4{
bottom:0
}
我想你要表达是是高50吧？不太会表述，还是直接给你上代码吧
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<style type="text/css">
.row p{
float: left
padding-right:10px
}
.line p {
float: left
padding-right: 10px
writing-mode : vertical-rl
}
.clearfix {
clear: both
overflow: hidden
}
</style>
</head>
<body>
<div>
<p>第一行第一行第一行第一行</p>
<p>第二行第二行第二行第二行</p>
<p>第三行第三行第三行第三行</p>
<p>第四行第四行第四行第四行</p>
</div>
<div class="row clearfix">
<p>第一列第一列第一列第一列</p>
<p>第二列第二列第二列第二列</p>
<p>第三列第三列第三列第三列</p>
<p>第四列第四列第四列第四列</p>
</div>
<div class="line">
<p>第一列第一列第一列第一列</p>
<p>第二列第二列第二列第二列</p>
<p>第三列第三列第三列第三列</p>
<p>第四列第四列第四列第四列</p>
</div>
</body>
</html>
我不知道你的列是横排的列还是竖排的列，都给你写出来了
