Divs 在调整 CSS 大小时自动移动位置答案

【问题标题】：Divs move auto of the poisition on resize CSSDivs 在调整 CSS 大小时自动移动位置
【发布时间】：2014-01-15 11:15:51
【问题描述】：

我遇到了问题，我找不到合适的解决方案，我有两个 div，当我将大小调整到 800 像素以下（1ºdiv 宽度 + 2ºdiv 宽度）时，第二个移到 1º 的下方.我想要的是修复元素（不是“固定”位置），但无论如何我都希望它们并排放置，比如在 Facebook 页面或谷歌中，当我调整大小时，即使它们去“外面”，它们也会留在同一个地方窗户。 http://jsfiddle.net/VLt9m/。提前致谢。

#wrapper {
padding:92px 0 0 0;
width:100%;
float:left;
}
#content a {
    text-decoration: none;
}
#block1{
    background-color: #FFC374;
    width:400px;
    height:400px;
    margin:0;
    float: left;
    position: relative;
}
#b1Title{
    width:400px;
    height:100px;
    margin:0;
    background-color: #FFD190;
    opacity: 0.8;
    position: absolute;
}
#b1Title h1{
    color: #222;
    font-size: 200%;
    margin: 8% 0 0 12%;
}
#block2{
    background-color:#449DCC;
    width:400px;
    height:400px;
    margin:0;
    float: left;
    position: relative;
}
#b2Title{
    width:400px;
    height:100px;
    margin:0;
    background-color:#80B7D7;
    opacity: 0.8;
    position: absolute;
}
#b2Title h1{
    color: #222;
    font-size: 200%;
    margin: 8% 0 0 12%;
}

【问题讨论】：

你能做一个jsfiddle.net 演示吗？
ofc，完成。 jsfiddle.net/VLt9m

标签： css resize position

【解决方案1】：

如果您愿意，可以使用media query 进行操作。但是，这是max-width 的快速修复

Working Demo

将此添加到块

max-width:400px;
width:50%;

这是标题

max-width:400px;
width:100%;

更新

给wrapper固定宽度

Working Demo

#wrapper {
    padding:92px 0 0 0;
    width:800px;
    float:left;
}

【讨论】：

谢谢，但不是我真正想要的，我希望他们始终拥有 400 像素，无论如何，即使我调整大小低于 800 像素
这怎么可能？或者你的意思是scroll？宽度应为400 并滚动查看更多？
这就像 facebook 页面，即使窗口只有 500 像素，元素也始终保持在同一个位置，它们不会调整大小，也不会移出该位置，就像它们附加到背景
不，因为我做不到。但是例如转到w3schools.com 并调整窗口大小，这就是我想要发生的事情
感谢您抽出宝贵时间。

【解决方案2】：

如果我的猜测是正确的，那么你需要给出 min-width:800px;到包装器。

#wrapper{
padding:92px 0 0 0;
min-width:800px;
float:left;
overflow:auto;}

See here

【讨论】：

非常感谢，没错就是这样。