列表无法正确显示，仅在添加图像时

Question

我正在构建一个简单的网站，该网站订购一系列流，并决定在无组织的列表中组织它们。使用api调用返回每个流的图像，然后将每个图像添加到列表中。

如果没有请求的图像，列表会正确显示：

http://i.imgur.com/0VZ31V9.jpg

然而，当我将图像添加到列表中时，它似乎弄乱了布局（随机）：

http://i.imgur.com/fpJ8bkj.png

PHP（获取图像）：

<?php
    $turl = "https://api.twitch.tv/kraken";
    $streams = "/streams?game=League+of+Legends&limit=20";

    $search_item = $_GET['item'];

    $json = file_get_contents($turl . $streams);
    $json_output = json_decode($json);
?>

HTML：

<div id="main">
        <ul id="streamlist">
            <?php
                foreach ($json_output->streams as $stream)
                {   
                    $user = $stream->channel->display_name;
                    $status = $stream->channel->status;
                    echo "<li><div class='preview'>
                                    <a href='http://twitch.tv/$user'><img class='imgprev' src='$stream->preview' /></a>
                                    <div class='streamcontent'>

                                    </div>
                                </div>
                          </li>";
                }
            ?>
        </ul>
</div>

CSS：

#streamlist{
margin: 0;
padding: 0;
width: 960px;

}

#streamlist li{
width: 210px;
height: 210px;
margin-right: 20px;
display: inline-block;
overflow: hidden;
}

.preview img{
width: 50px;
padding: 10px 10px 0px 10px;
}

.preview{
width: 210px;
height: 210px;
min-width: 210px;
min-height: 210px;
background-image: url('../images/streambg.png');
overflow: hidden;
}