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

Question

我正在尝试使响应式设计。

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

但最小宽度必须是300像素，并应在底部显示的时候，它比300像素窄（见下图）

为什么这样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 
    } 

} 

使用媒体查询您可以编写自定义CSS的宽度不同的设备。在这个例子中，.box类在小于600px的屏幕上表现不同。

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

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

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/