固定宽度内图片左飘排列问题

<div style="width:600px; height:500px; border:1px #f50 solid;"> <ul style="list-style: none;margin:0;padding:0;"> <li style="float:left; width:150px;height:160px; background:#000;"></li> <li style="float:left; width:300px;height:75px; background:#f00;"></li> <li style="float:left; width:300px;height:75px; background:#f00;margin-top:10px;"></li> <li style="float:left; width:150px;height:160px; background:#000;"></li> </ul> </div>
 提示：您可以先修改部分代码再运行