<div class="mid-bom">

   <div id="mid-bom-1" class="conn">
       <p>新闻中心</p>
       <ul>
           <li class="p">
               <div><span>8月23日</span></div>
              <div class="a"> <h5>学习计划之“AndrolD攻城狮养成”</h5>
                  望成为AndrolD攻城狮么？想开发一款专属APP？没有任何基础的你，应该从何学起？</div>
           </li>
           <li class="p">
               <div><span>8月23日</span></div>
              <div  class="a"> <h5>学习计划之“AndrolD攻城狮养成”</h5>
                  望成为AndrolD攻城狮么？想开发一款专属APP？没有任何基础的你，应该从何学起？</div>
           </li>
           <li class="p">
               <div><span>8月23日</span></div>
               <div class="a"><h5>学习计划之“AndrolD攻城狮养成”</h5>
                   望成为AndrolD攻城狮么？想开发一款专属APP？没有任何基础的你，应该从何学起？</div>
           </li>
       </ul>
   </div>

.mid-bom{
   height:325px;
   overflow: hidden;
}
.conn{
   float:left;
   width: 328px;
   height:315px;
   border:1px solid #ccbdb8;
}
.p{
float: left;
}
.conn p{
   height:40px;
   line-height: 40px;
   background-color: #cc0000;
   font-family: "微软雅黑";
   font-size:15px;
   color:#ffffff;
   padding-left:30px;

}
#mid-bom-1 li{
   height:69px;
   font-family:"微软雅黑" ;
   font-size:12px;
   border-bottom: 1px solid #ccbdb8;
   margin:10px 20px 10px 0px;
   display:inline-block;
   float:left;

}

#mid-bom-1 span{
   display:block;
   background-color: #cc0000;
   width:35px;
   height:45px;
   color: white;
   text-align: center;
   line-height: 40px;
   margin-left: 10px;
}
.a{
   width:220px;
   height:50px;
}