css多行布局错乱

Question

原图：

自己实现的图：

存在问题：那个“进入”按钮无法向原图那样排序，要是使用position相对位置的话，就会在不同的尺寸下乱跑。
自己的实现代码：
<div class="mainList">

        <!--<div class="row" style="background-color: white;z-index: 3">-->
        <div class="row">
            <img src="../public/images/gsbxs.png"  class="image">
            <span class="title">
                <div class="gameTitle">怪兽必须死</div>
                <div  class="hot">热门</div>
                <div  class="rec">推荐</div>
                <div class="fine">精品</div>
                <div class="des">保卫家园，人在城在！</div>
                <div class="btnIn">
                    <input type="button"   value="进入">
                </div>
            </span>
            <!--<div class="btnIn" >-->
                <!--<input type="button" value="进入">-->
            <!--</div>-->
        </div>
    </div>
    
   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;

}

Answer 1

1. div不要放在span里面。

2. div.row设置position属性为relative。

3. <!--<input type="button" value="进入">--> 这行注释取消，给他设置position:abosulte;可以相对于div.row定位。

Answer 2

首先你要把你的原图分为三个部分，我已经用红色的边框帮你选出来了，然后代码应该这样写

<div class="row">
            <div class="item-image"><img src="../public/images/gsbxs.png"  ></div>
            <div class="item-title">
                <div class="game-title">
                   <h3>怪兽必须死</h3>
                   <div class="game-more">
                       <a  class="hot">热门</a>
                       <a  class="rec">推荐</a>
                       <a class="fine">精品</a>
                   </div>
                </div>
             <div class="item-titile-des">
                 <p>保卫家园，人在城在！</p>
             </div>
                
            </div>
            <div class="item-button">
                    <input type="button"   value="进入">
             </div>
             
             
     css代码：
     .row:after,.item-title:after,.game-more:after,{ 
          content: ".";
          height: 0;
          line-height: 0;
          display: block;
          overflow: hidden;
          font-size: 0;
          clear: both;
          }
     .item-image{float:left;}     
     .item-title{float:left;}
     .item-title .game-title h3,.item-title .game-more{float:left;}
     .item-title .item-titile-des{font-size:12px;color:#636363;text-align:left;}
     .item-button{float:right;margin-top:50px;}
     

样式我大概帮你写了一下。其他具体的你自己看着写吧，首先你的布局问题就没有弄懂，而且标签运用的不是很熟练，多练习一下肯定会更好