0

在http://www.gamefaqs.com/上，有两个相邻的 div，内容和旁边（投票）。当您调整窗口大小时，民意调查最终会被击倒到底部，但它不会留下任何空间，并且内容会延伸到民意调查所在的位置。

我正在尝试这样做，但我只是从我的旁边被撞倒的地方获得了空白空间。

请参考这张图片了解我的意思：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;
}
4

1 回答 1

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

于 2013-06-28T18:57:20.200 回答