html - 让一个 div 延伸到 CSS 中先前 div 的位置？

Question

关于 http://www.gamefaqs.com/ ，有两个相邻的 div，content 和 aside (poll)。当您调整窗口大小时，民意调查最终会被推到底部，但不会留下任何空间，内容会延伸到民意调查所在的位置。

我正在努力做到这一点，但我只是从我的一侧被撞到的地方得到了空白。

我的意思请引用这张图:http://imageshack.us/a/img37/4759/5tag.jpg

如何让它像 GameFAQs 网站一样运行？

这是我的 CSS

.container {
    width: 75%;
    overflow: auto;
    border: #FCC;
    border-style:double;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

.container .content {
    background: #FFF;
    width: 75%;
    padding: 15px;
    float: left;
    box-sizing:border-box;
}

.container .archive {
    border:#3C9 thick;
    border-style:solid;
    background: #FFF;
    float:left;
    width:23%;
    padding: 15px;
    margin-left:15px;
    box-sizing:border-box;
}

Answer 1

你必须改变你的 .archive 类和你的 .content 不是父级的百分比，因为如果它们永远不会得到，它们将始终并排放置比它们的容器大(因为它们将始终保持在宽度的 98%。

你可以做三种不同的事情来解决这个问题:

1.) 您可以为这些类的宽度建立静态值。

2.) 您可以添加此 CSS:

.container .content {
  min-width: 600px;
}
.container .archive {
  min-width: 200px;
}

min-width 将阻止子级缩小到您设置的尺寸以下，因此当父级 (.container) 变得太小而无法容纳它们的最小尺寸时，第二个 div 将适本地向下移动。

3.) 您可以考虑使用 CSS3 媒体查询和响应式设计策略:

http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries