微信公众号多图文列表css

<style type="text/css">
    
.msg_page{
  font-size:12px;
  background-color:#f4f4f4;
  padding:10px 0;
  width:60%;
}

.msg_list{
  zoom:1;
  margin-bottom:5px;
  margin-left:5px;
  margin-right:5px;
}

.msg_list_bd{
  margin-left:auto;
  margin-right:auto;
  background-color:#fff;
  border:1px solid #cacbcb;
  box-shadow:0 1px 2px #ddd;
  -moz-box-shadow:0 1px 2px #ddd;
  -webkit-box-shadow:0 1px 2px #ddd;
  padding:10px 20px;
}

.msg_wrapper{
  font-size:14px;
}

.msg_inner_wrapper{
  display:inline-block;
  width:100%;
  color:#000;
  text-decoration:none;
}

.images_box{
  margin-top:4px;
}

.msg_title{
  font-size:13px;
  font-weight:700;
  color:#000;
  word-wrap:break-word;
  word-break:break-all;
}

.msg_date{
  color:#9a9a9a;
}

.msg_cover{
  position:relative;
  height:150px;
  overflow:hidden;
  font-size:0;
  text-decoration:none;
  display:block;
}

.msg_cover img{
  width:100%;
}

.msg_cover .msg_title{
  color:#fff;
  text-decoration:none;
  padding:5px;
}

.msg_desc{
  color:#9a9a9a;
  word-wrap:break-word;
  word-break:break-all;
}

.msg_title_bar{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:rgba(0,0,0,0.8);
}

.sub_msg_list{
  padding-top:8px;
}

.sub_msg_item{
  overflow:hidden;
  zoom:1;
  border-top:1px solid #e5e5e5;
  display:block;
  text-decoration:none;
  padding:3px 0;
}

.thumb{
  float:right;
  border:1px solid #e5e5e5;
  font-size:0;
  padding:1px;
}

.thumb img{
  width:50px;
}


</style>

<div class="msg_page" id="msg_page">    

 <div class="msg_list">
        <div class="msg_list_bd">
            
            <div class="msg_wrapper">
                    <p class="msg_date">XXXXXXXXXXXXXXX</p>
                    <div class="msg_inner_wrapper default_box news_box">
                    <div class="msg_item multi_news">
                        <a class="msg_cover redirect" href="http://weibo.com/1253711052/profile?topnav=1&wvr=6" target="_blank">
                            <img alt="" style="visibility: visible !important;" src="http://ww4.sinaimg.cn/bmiddle/69c94e53jw1f1xjp4bxtrj20b405k0tb.jpg">
                            <div class="msg_title_bar">
                                <h4 class="msg_title">XXXXXXXXXXXXXXXXXXX1</h4>
                            </div>
                        </a>
                        
                            <div class="sub_msg_list">
                                <a class="sub_msg_item redirect" href="http://weibo.com/1253711052/profile?topnav=1&wvr=6" target="_blank">
                                    <span class="thumb">
                                        <img alt="" style="width: 50px; height: 50px; visibility: visible !important;"  src="http://ww2.sinaimg.cn/bmiddle/884f7263jw1f1xjk4u64qj20ir0dsjsy.jpg">
                                    </span>
                                    <h4 class="msg_title">灯下看她22</h4>
                                </a>
                            </div>

                            <div class="sub_msg_list">
                                <a class="sub_msg_item redirect" href="http://weibo.com/1253711052/profile?topnav=1&wvr=6" target="_blank">
                                    <span class="thumb">
                                        <img alt="" style="width: 50px; height: 50px; visibility: visible !important;"  src="http://ww2.sinaimg.cn/bmiddle/884f7263jw1f1xjk4u64qj20ir0dsjsy.jpg">
                                    </span>
                                    <h4 class="msg_title">灯下看她333</h4>
                                </a>
                            </div>
                        
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
</div>

 tr