pc端自适应页面之新闻列表页

近两天做了个PC端自适应列表页，遇到颇多麻烦。
首先让我们一起来分析下页面页面是左右结构的，左边是菜单，右边才是列表，然而问题来了，请看图

这便是页面布局，还要考虑自适应，首先，左侧的导航不用说，那我们来说说右面的列表，列表图片是固定大小的（px），标题超出一行显示省略号，代码如下

html

<div class="m_news_list_right">        <ul class="clearfix">          <li class="clearfix">            <a href="javascript:;" class="clearfix">                <i><img src="image/list.png" alt=""></i>                <div class="m_mews_list_detail">                  <h2>国务院安委会巡查组反馈第四批巡查情况</h2>                  <p>今年6月至7月，国务院安委会8个巡查组先后进驻内蒙古、上海、湖北、甘肃、海南、西藏、青海、新疆等地区和新疆生产建设兵团开展了为期1个月的安全生产巡查，发现各地区在落实安全生产责任制、健全安全监管体系体系体系健全安全监管体系体系体系…<em>查看详情</em></p>                  <span>时间：2017-08-14 11:55:41</span>                  <span>作者：党宣办</span>                  <span>文档来源：党宣办</span>                </div>            </a>          </li>          <li class="clearfix">            <a href="javascript:;" class="clearfix">                <i><img src="image/list.png" alt=""></i>                <div class="m_mews_list_detail">                  <h2>国务院安委会巡查组反馈第四批巡查情况国务院安委会巡查组反馈第四批巡查情况国务院安委会巡查组反馈第四批巡查情况</h2>                  <p>今年6月至7月，国务院安委会8个巡查组先后进驻内蒙古、上海、湖北、甘肃、海南、西藏、青海、新疆等地区和新疆生产建设兵团开展了为期1个月的安全生产巡查，发现各地区在落实安全生产责任制、健全安全监管体系体系体系健全安全监管体系体系体系…<em>查看详情</em></p>                  <span>时间：2017-08-14 11:55:41</span>                  <span>作者：党宣办</span>                  <span>文档来源：党宣办</span>                </div>            </a>          </li>          <li class="clearfix">            <a href="javascript:;">              <h2>国务院安委会巡查组反馈第四批巡查情况国务院安委会巡查组反馈第四批巡查情况国务院安委会巡查组反馈第四批巡查情况</h2>              <p>今年6月至7月，国务院安委会8个巡查组先后进驻内蒙古、上海、湖北、甘肃、海南、西藏、青海、新疆等地区和新疆生产建设兵团开展了为期1个月的安全生产巡查，发现各地区在落实安全生产责任制、健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系…<em>查看详情</em></p>              <span>时间：2017-08-14 11:55:41</span>              <span>作者：党宣办</span>              <span>文档来源：党宣办</span>            </a>          </li>          <li class="clearfix">            <a href="javascript:;">              <h2>国务院安委会巡查组反馈第四批巡查情况</h2>              <p>今年6月至7月，国务院安委会8个巡查组先后进驻内蒙古、上海、湖北、甘肃、海南、西藏、青海、新疆等地区和新疆生产建设兵团开展了为期1个月的安全生产巡查，发现各地区在落实安全生产责任制、健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系健全安全监管体系体系体系…<em>查看详情</em></p>              <span>时间：2017-08-14 11:55:41</span>              <span>作者：党宣办</span>              <span>文档来源：党宣办</span>            </a>          </li>          <li class="clearfix">            <a href="javascript:;" class="clearfix">                <i><img src="image/list.png" alt=""></i>                <div class="m_mews_list_detail">                  <h2>国务院安委会巡查组反馈第四批巡查情况</h2>                  <p>今年6月至7月，国务院安委会8个巡查组先后进驻内蒙古、上海、湖北、甘肃、海南、西藏、青海、新疆等地区和新疆生产建设兵团开展了为期1个月的安全生产巡查，发现各地区在落实安全生产责任制、健全安全监管体系体系体系健全安全监管体系体系体系…<em>查看详情</em></p>                  <span>时间：2017-08-14 11:55:41</span>                  <span>作者：党宣办</span>                  <span>文档来源：党宣办</span>                </div>            </a>          </li>          <li class="clearfix">            <a href="javascript:;" class="clearfix">                <i><img src="image/list.png" alt=""></i>                <div class="m_mews_list_detail">                  <h2>国务院安委会巡查组反馈第四批巡查情况</h2>                  <p>今年6月至7月，国务院安委会8个巡查组先后进驻内蒙古、上海、湖北、甘肃、海南、西藏、青海、新疆等地区和新疆生产建设兵团开展了为期1个月的安全生产巡查，发现各地区在落实安全生产责任制、健全安全监管体系体系体系健全安全监管体系体系体系…<em>查看详情</em></p>                  <span>时间：2017-08-14 11:55:41</span>                  <span>作者：党宣办</span>                  <span>文档来源：党宣办</span>                </div>            </a>          </li>        </ul>      </div>

css


.m_news_list .m_news_list_right{float: left;width: 74%;height: 100%;background: #fff;}
.m_news_list .m_news_list_right ul{width: 98%;margin: 20px 0;height: 95%;overflow-y: auto;margin-left: 2%;}
.m_news_list .m_news_list_right ul li{padding: 20px 0;border-bottom: 1px solid #f6f6f6;width: 98%;}
.m_news_list .m_news_list_right ul li a{display: block;position: relative;}
.m_news_list .m_news_list_right ul li a i{display: inline-block;width: 225px;position: absolute;left: 0;}
.m_news_list .m_news_list_right ul li a i img{width: 225px;height: 156px;}
.m_news_list .m_news_list_right ul li a .m_mews_list_detail{margin-left: 250px;}
.m_news_list .m_news_list_right ul li a i img{width: 225px;height: 156px;}
.m_news_list .m_news_list_right ul li a h2{font-weight: bold;font-size: 22px;color: #000;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.m_news_list .m_news_list_right ul li a p{margin:21px 0;font-size: 16px;color: #646464;width: 100%;}
.m_news_list .m_news_list_right ul li a p em{color: #ff9901;padding-left: 5px;}
.m_news_list .m_news_list_right ul li a span{color: #d4d0cb;font-size: 15px;}