css怎样实现列表实现每行三个项目，如图所示。
看起来不是在一行，是每一个在一列，因为高度不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#list {
border: 1px solid red;
padding: 10px 5px 10px 10px;
display: inline-block;
}
.list_left,
.list_middle,
.list_right {
float: left;
margin-right: 10px;
width: 150px;
}
#list:after {
content: "";
width: 0px;
height: 0px;
display: block;
clear: both;
}
#list ul {
margin: 0px;
padding: 5px;
list-style: none;
}
#list ul li {
border: 1px solid grey;
margin-top: 10px;
}
#list ul li div:first-child {
text-align: center;
height: 200px;
}
#list ul li div:last-child {
text-align: center;
border-top: 1px solid grey;;
}
</style>
</head>
<body>
<div id="list">
<div class="list_left">
<ul>
<li>
<div></div>
<div>电影标题题电影标题电影标题电影标题电影标题电影标题</div>
</li>
<li>
<div></div>
<div>电影标题电影标题电影标题电影标题电影标</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
</ul>
</div>
<div class="list_middle">
<ul>
<li>
<div></div>
<div>电影标题</div>
</li>
<li>
<div></div>
<div>电影标题2电影标题2</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
</ul>
</div>
<div class="list_right">
<ul>
<li>
<div></div>
<div>电影标题</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
<li>
<div></div>
<div>电影标题</div>
</li>
</ul>
</div>
</div>
</body>
</html>
能具体点吗？
图片和下面的东西都是在一个li里面的，在里面在写其他的东西
