近兩天做了個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;}