为什么这个CSS不会像这个图像一样响应设计？

Question

我正在尝试制作响应式设计。

主要有2个部分，如左右部分。 左侧部分总是必须是300px，右侧部分将是灵活的宽度。

但最小宽度必须为300px，当它比300px窄时应显示在底部（见下图）

为什么这个CSS不会像这张图片一样响应设计？

这是演示http://jsfiddle.net/5Uy2Y/ 在我的演示中，我没有为每个单元格设置边框。请忽略它。

HTML 我可以删除<div class="box">吗？

<div class="Row">
    <div class="box">
    <div class="Left">  
        <div class="posted_at">July 22, 2013 04:34:14</div>
        <div class="user">John Smith</div>
        <div class="location">California</div>
    </div>
    </div>

    <div class="box">
    <div class="Right">
        <div class="body">Hello, I'm John Smith Nice to know you</div>
    </div>
    </div>

</div>

CSS

div.Row{
    border:2px solid rgb(0, 0, 0);
    min-width: 300px;
    margin-bottom: 20px;
    margin-right: 20px;
    float:left;
    display:block;  
}

div.Box{
    padding:0px;
    text-align:center;
    float:left;
}

div.Left{
    width:300px;
    text-align:center;
    padding:5px;
    clear:both;
}

div.Right{
    text-align:left;
    clear:both;
    min-width: 300px;
}

div.posted_at{
}
div.user{
}
div.location{
}
div.body{
}

Answer 1

使用媒体查询：

@media (min-width: 600px) 
{

   .box{
    display:block;
    position:static;
    float:none
   }

}

使用Media Query，您可以将自定义css写入具有不同宽度的设备。在此示例中，.box类在小于600px的屏幕上表现不同。

http://www.w3.org/TR/css3-mediaqueries/

您还可以使用jQuery的.box方法删除.removeClass()类。

http://api.jquery.com/removeClass/

如果没有媒体查询，我就会这样做。

.box{
    padding:0px;
    text-align:center;
    display:inline-block;
}

.Left{
    width:300px;
    text-align:center;
    padding:5px;
    border:solid 1px black;
}

.Right{
    text-align:left;
    width: 300px;
    border:solid 1px black;
}

你可以在这里看到小提琴http://jsfiddle.net/5Uy2Y/1/