【微信小程序】image图片控件摆放案例

需要实现的效果

   
        
         
         
       
       
        标题
        子标题
        演员表
       
       
            9.7
            购票
             
   
   
       
           
           
       
   

/**index.wxss:调整样式**/
.flex
{
  display: flex;
  width:300px;
  height: 100px;
}
.item{
  padding: 10px;
  background-color: #fff;
  color: #787878;
  border-top: 1px solid #787878; /**上横线**/
  border-bottom: 1px solid  #787878;   /**下横线**/
}


.item image
{
  display: block;
  width:65px;
  height:95px;
  overflow: hidden;
}
 
.item-middle
{
  flex:1;
  margin-left:10px;
  padding-top: 5px;  
}
.item-middle .title
{
  font-size: 16px;
  color:chocolate;
}
.item-middle .sub-title
{
  font-size: 12px;
  color:blue;
  margin: 2px;
}
.item-middle .actor
{
  font-size: 23px;
  color:blueviolet;  
}
.item-right  
{
}
.item-right .score
{
  font-size: 12px;
  color:red;
}
.item-right .action
{
  margin-top: 30px;
  border:1px solid #29cc6d;
  color:cadetblue;
  display: inline-block;
  padding: 2px 4px;
  font-size: 14px;
  border-radius: 8px; /**半角的显示：数越大显示的幅度就越大**/
}