html - 我如何使这个正确的内容响应？

Question

我希望这个#content 像这样http://i.imgur.com/tunmL9B.jpg 如果它在较小的屏幕上。#content 应该根据屏幕尺寸缩小

如果它在大屏幕上，我希望它能占据尽可能多的空间，就像这样http://i.imgur.com/xB6bNsU.jpg .我该怎么做？

#wrapper{
width:100%;
}

#sidebar{float:left;width:250px;}
#content{float:left;width:900px}


.post{
margin:0px 0px 25px 0px;
padding:0px 0px 15px 0px;
}

.post .date{
float:left;
width:50px;
height:50px;
font-size:18px;
margin:0px 25px 0px 25px;
line-height:24px;
text-align:center;
}


.post h2{
font-size:20px;
line-height:24px;
}

谢谢!

Answer 1

随便写

#sidebar{ float:left; width:250px;}
#content{ margin-left: 250px; }

侧边栏将保持其宽度，而您的内容将随着视口(viewport)宽度而增长。这里的媒体查询并不是真正必要的，所以这个例子甚至适用于 IE<9

fiddle 示例:http://jsfiddle.net/wn6fx/