微信公众号多图文列表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>