html - 响应式设计 div 不随屏幕宽度扩展

Question

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

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

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

目前在768px时会从两列切换到一列。

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

我试过 css width:auto;高度:自动；最大宽度: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%;