用于窗口调整大小的Div布局拼图

Question

我正在努力使我的网页（www.webspacegallery.com）使用不同的窗口大小/分辨率很好地改变布局。

到目前为止，我认为我做了相当不错的工作。但是我对当前的问题感到有些困惑。

这里有关于我要做的事情的屏幕截图：

http://www.webspacegallery.com/big.jpg

要：

http://www.webspacegallery.com/small.jpg

有谁知道最好的div布局是什么？

当前代码：

<div class="video-container">
<iframe src="//player.vimeo.com/video/57042874?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" height="540" width="960" allowfullscreen="" frameborder="0"></iframe>
</div>
<div class="wrapper">
<div class="content1"></div>
<div class="content2"></div>
</div>

.content1{
    float: left;
    display: block;
    width: 34%;
    min-width: 200px;
    font-size: 16px;
    margin-left: 7px;
    margin-right: 0px;
    font-family: "Courier New", Courier, monospace
    border: 0px #aaa solid;
    font-size: 16px;
}
.content2 {
    float: left;
    display: block;
    width: 64%;
    min-width: 200px;
    font-size: 15px;
    font-family: "Courier New", Courier, monospace
    margin-left: 0px;
    margin-right: 5px;
    border: 0px #aaa solid;
    font-size: 15px;
}

Answer 1

我个人使用Foundation。

Foundation是一个免费的，易于学习的模板系统，用于创建流体网格和布局。

查看此处：http://foundation.zurb.com/index.html

例如，请尝试在此处调整浏览器大小：

http://www.sinsysonline.com/secondhomehostel

这些课程非常容易学习，而且文档准确而简洁。

---

这是一个免费的设置，可以播放和修补基础，以了解您是否想要使用它。这真是一个非常好的图书馆。

http://codepen.io/mhayes/pen/qdCAc

如果您想在小提琴中使用扩展解决方案，请告诉我。