响应式设计不随屏幕宽度而扩展

Question

我已经设置了一个小提琴http://jsfiddle.net/25d8ejkf/1/

我有一个简单的文章列表页面，我需要在N x 2行的矩阵中列出文章

我想要保持两列的设计，直到屏幕尺寸为680像素，然后它应该每行显示单个图像。

目前，当屏幕为768px时，它会从两列切换到一列。

如何在保持设计的同时使div自动调整宽度。

我试过css width:auto; height:auto; max-width:310px; max-height:207px;，但是我在鼻涕

.news
{
    float:left;
    max-width:310px;
    max-height:207px;
    width:auto;
    height:auto;
    background-color:Fuchsia;
    margin-right:31px;
    margin-bottom:31px;  
}

HTML

<div class="news-wrapper">
    <div class="news">
        <div class="news-date"><span class="news-day"></span><span class="news-month"></span><span class="news-year"></span></div>
        <div class="news-image"><img src="http://dummyimage.com/310x207/000/ccc" /></div>
        <div class="news-title"><span class="news-title-h1"></span></div>
    </div>

    <div class="news">
        <div class="news-date"><span class="news-day"></span><span class="news-month"></span><span class="news-year"></span></div>
        <div class="news-image"><img src="http://dummyimage.com/310x207/000/ccc" /></div>
        <div class="news-title"><span class="news-title-h1"></span></div>
    </div>

    <div class="news">
        <div class="news-date"><span class="news-day"></span><span class="news-month"></span><span class="news-year"></span></div>
        <div class="news-image"><img src="http://dummyimage.com/310x207/000/ccc" /></div>
        <div class="news-title"><span class="news-title-h1"></span></div>
    </div>

    <div class="news">
        <div class="news-date"><span class="news-day"></span><span class="news-month"></span><span class="news-year"></span></div>
        <div class="news-image"><img src="http://dummyimage.com/310x207/000/ccc" /></div>
        <div class="news-title"><span class="news-title-h1"></span></div>
    </div>

</div>

更新：

为了解释更多，我正在添加两个样本以使其更清晰地了解设计

Answer 1

你可能想用百分比来做到这一点。

width:100%;

Answer 2

使用以下内容：

@media (max-width: 768px){
    .news{
        width:100%;
        max-width: none;
     }
}

希望这能解决问题。 ：）