为什么css设计布局会乱,css多行布局错乱

原图：

自己实现的图：

存在问题：那个“进入”按钮无法向原图那样排序，要是使用position相对位置的话，就会在不同的尺寸下乱跑。

自己的实现代码：

怪兽必须死

热门

推荐

精品

保卫家园，人在城在！

css代码：

.row .image {

float: left;

width:50px;

height:50px;

margin-right:10px

}

.row .title {

}

.title .gameTitle {

display: inline;

float: left;

font-size: 16px;

margin:0px;

}

.title .hot {

float: left;

display: inline;

margin-left: 2px;

font-size: 2px;

color:#fd9b01;

padding:1px;

border:1px solid #fd9b01;

vertical-align: middle;

}

.title .rec {

float: left;

display: inline;

margin-left: 2px;

font-size: 2px;

padding:1px;

color:#1a7d03;

border:1px solid #1a7d03;

}

.title .fine {

float: left;

display: inline;

margin-left: 2px;

font-size: 2px;

padding:1px;

color:#6d16bf;

border:1px solid #6d16bf;

}

.title .des {

margin-top: 0px;

width: 200px;

font-size: 12px;

color: #888888;

}

.title .btnIn {

float: left;

width: 150px;

}