化妝inline-block的元素響應

Question

HTML

<div class="article"> 
      <a href="#"><img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/></a> 
      <div class="dateAuthor"> 
       <span class="date">Jan 4, 2014</span> 
       <span>&mdash; By </span> 
       <span class="author">Jonathan Lakin</span> 
      </div> 
      <h1><a href="#">Cookies Tell You A Lot About Your Audience, But Most of it is Wrong</a></h1> 
     </div><div class="article"> 
      <a href="#"><img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/></a> 
      <div class="dateAuthor"> 
       <span class="date">Jan 4, 2014</span> 
       <span>&mdash; By </span> 
       <span class="author">Jonathan Lakin</span> 
      </div> 
      <h1><a href="#">Ten Website Trends To Expect</a></h1> 
     </div> 

CSS

.article{ 
    display: inline-block; 
    vertical-align: top; 
    margin: 0 1.6839378238341968911917098445596% 30px 1.6839378238341968911917098445596%; /* 13px/772px */ 
} 
.article img{ 
    max-width: 360px; 
    width: 100%; 
    display: block; 
} 
.article h1{ 
    max-width: 350px; 
    width: 100%;  /* 350px/800px */ 
    margin-top: 10px; 
    font-size: 1.5em; 
} 
@media only screen 
      and (max-width : 1000px) { 
      #articlesWrapper{ 
       margin-left: 1.0416666666666666666666666666667%; /* 10px/960px */ 
       margin-right: 1.0416666666666666666666666666667%; /* 10px/960px */ 
      } 
      } 
@media only screen 
      and (max-width : 720px) { 
      .article img{ 
       max-width: 100%; 
      } 
      .article h1{ 
       max-width: 97.222222222222222222222222222222%; /* 350px/360px */ 
      } 
      } 

jsFiddle

這裏的問題是，當width低於周圍850px的inline-block風格不工作和元素低於其他元素，我想要做的是讓這些響應。我的意思是，當width下降到850px以下時，我希望元素保持爲inline-blocks，而在寬度下降時減少size/width。像720px以下發生的事情，但是作爲inline-blocks。如何做到這一點？

Answer 1

http://jsfiddle.net/6wbfy/3/

這似乎很好地工作。

.article { 
    width: 45%; 
}