4.23

.w_grid {
  width: 100%;
  overflow:hidden; /* hack to take up height*/
  text-align:center;
}

.w_item{
    width:33.3%;
    height:220px;
    text-align:center;
    display:table;
    filter:alpha(opacity=70);  
    -moz-opacity:0.7;  
    -khtml-opacity: 0.7;  
    opacity: 0.7;  
    float:left;
    padding:10px;
}



.w_item_content{
            display:table-cell;
            background:green;
            vertical-align:middle;    
}

.item_text{
    width:100%;
    text-align:center;
    overflow:hidden;
    font-size:22px;
}

@media only screen and (max-width: 720px) {

.w_item{
    width:33.3%;
    height:200px;
    text-align:center;
    display:table;
    filter:alpha(opacity=70);  
    -moz-opacity:0.7;  
    -khtml-opacity: 0.7;  
    opacity: 0.7;  
    float:left;
    padding:10px;
}
@media only screen and (max-width: 640px) {
.w_item{
    width:33.3%;
    height:180px;
    text-align:center;
    display:table;
    filter:alpha(opacity=70);  
    -moz-opacity:0.7;  
    -khtml-opacity: 0.7;  
    opacity: 0.7;  
    float:left;
    padding:10px;
}
@media only screen and (max-width: 480px) {
.w_item{
    width:33.3%;
    height:160px;
    text-align:center;
    display:table;
    filter:alpha(opacity=70);  
    -moz-opacity:0.7;  
    -khtml-opacity: 0.7;  
    opacity: 0.7;  
    float:left;
    padding:10px;
}
@media only screen and (max-width: 320px) {
.w_item{
    width:33.3%;
    height:90px;
    text-align:center;
    display:table;
    filter:alpha(opacity=70);  
    -moz-opacity:0.7;  
    -khtml-opacity: 0.7;  
    opacity: 0.7;  
    float:left;
    padding:10px;
}
}

 <!-- 九宫格 -->
 
        <div class="w_grid">
         <a id='item1' class="w_item" href="#travel">
            <div class="w_item_content">    
                <img src="../img/list_item.jpg" alt="" />
                <div class="itemtext">旅游预报</div>
            </div>
        </a>
             <a id='item2' class="w_item"  href="#travel">
              <div class="w_item_content">    
             <img src="../img/list_item.jpg" alt="" />
               <div class="itemtext">农业气象 </div>
               </div>
             </a>
            <a id='item3' class="w_item" href="#travel">
            <div class="w_item_content">    
            <img src="../img/list_item.jpg" alt="" />
              <div class="itemtext">交通气象 </div>
              </div>
            </a>
        </div>
          
            <div class="w_grid">
         <a id='item1' class="w_item" href="#travel">
            <div class="w_item_content">    
                <img src="../img/list_item.jpg" alt="" />
                <div class="itemtext">旅游预报</div>
            </div>
        </a>
             <a id='item2' class="w_item"  href="#travel">
              <div class="w_item_content">    
             <img src="../img/list_item.jpg" alt="" />
               <div class="itemtext">农业气象 </div>
               </div>
             </a>
            <a id='item3' class="w_item" href="#travel">
            <div class="w_item_content">    
            <img src="../img/list_item.jpg" alt="" />
              <div class="itemtext">交通气象 </div>
              </div>
            </a>
        </div>    <div class="w_grid">
         <a id='item1' class="w_item" href="#travel">
            <div class="w_item_content">    
                <img src="../img/list_item.jpg" alt="" />
                <div class="itemtext">旅游预报</div>
            </div>
        </a>
             <a id='item2' class="w_item"  href="#travel">
              <div class="w_item_content">    
             <img src="../img/list_item.jpg" alt="" />
               <div class="itemtext">农业气象 </div>
               </div>
             </a>
            <a id='item3' class="w_item" href="#travel">
            <div class="w_item_content">    
            <img src="../img/list_item.jpg" alt="" />
              <div class="itemtext">交通气象 </div>
              </div>
            </a>
        </div>