css - 如何防止 div 元素在调整浏览器窗口大小时掉落？

Question

我希望我的网站尽可能灵活，我的意思是，如果它在各种分辨率(从常规平板电脑分辨率到全高清)下看起来都不错，那就太好了。我的 div 元素缩放得相当好，但我遇到了两个并排“框”的问题:当我调整浏览器窗口大小(演示较低的分辨率)时，右侧的框会落在左侧框的下方。 Logo 和导航缩放得很好，所以最终会做正确的框。但它并没有像我想要的那样立即执行。

我的网站结构如下所示:

<div id="runko">    
<div id="logo">
Site name
</div>

<div id="menu">         
navigation list
</div>

<div id="vasen">
    <div class="teksti">
    something
    </div>  
</div>      
<div id="oikea">
    <div class="teksti">
    something
    </div>
</div>

<div id="alapalkki">
Copyright
</div>

CSS 是这样的:

body {
background-color: transparent;
background-image: url(tausta.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% auto;
font-family: Tahoma;
font-size: 14px;
color: #000000;
height: 100%;
}

#runko {
background-color: transparent;
max-width: 1170px;
position: relative;
margin: auto;
overflow: hidden;
}

#logo {
background-image: url(logo.jpg);
background-size: 1138px;
background-repeat: no-repeat;
background-color: transparent;
width: 1170px;
height: 280px;
border: 0px solid transparent;
border: 16px solid rgba(255,255,255,0.5);
border-radius: 16px 16px 0px 0px;
-moz-border-radius: 16px 16px 0px 0px;
-webkit-border-radius: 16px 16px 0px 0px;
border-bottom: 0px;
font-family: Impact, "Tahoma";
font-size: 65px;
text-shadow: 2px 0 0 #FFFFFF, -2px 0 0 #FFFFFF, 0 2px 0 #FFFFFF, 0 -2px 0 #FFFFFF, 1px 1px #FFFFFF, -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF;
text-align: right;
padding: 0px 20px 20px 0px;
display: table-cell;
vertical-align: bottom;
}

#menu {
background-color: #3D2914;
max-width: 1170px;
margin-bottom: 5px;
border-top: 0px;
border-radius: 0px 0px 16px 16px;
-moz-border-radius: 0px 0px 16px 16px;
-webkit-border-radius: 0px 0px 16px 16px;
font-size: 18px;
text-align: center;
font-weight: bold;
}

#vasen {
background-color: transparent;
max-width: 300px;
float: left;
}

#oikea {
background-color: transparent;
max-width: 865px;
position: relative;
margin: auto;
float: left;
margin-left: 5px;
}

.teksti {
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.8);
margin-bottom: 5px;
border: 0px solid transparent;
border: 10px solid rgba(0,255,0,0.2);
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
}

#alapalkki {
background-color: #BAFFBA;
background-color: rgba(255,255,255,0.8);
border: 0px solid transparent;
border: 10px solid rgba(0,255,0,0.2);
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
position: relative;
clear: both;
margin-bottom: 30px;
padding: 5px;
font-weight: bold;
text-align: center;
}

我还没有清除 CSS(删除不必要的属性)，但我认为这不会导致问题。所以，问题是#oikea，甚至可能是.text。我应该添加或更改什么才能让它按照我想要的方式工作？ (左右框总是在旁边，当整个屏幕宽度低于300px时，也许右边的框会下降)？我尝试了很多方法，但似乎没有任何效果。 :( (芬兰网站，因此代码采用该语言；vasen = 左，oikea = 右，alapalalkki = 页脚，teksti = 文本)

DEMO on JSFIDDLE 已经谢谢你了!

Answer 1

从kougiland小 pig 回来；对你的 div 使用百分比。然后，当它们缩小到太小的尺寸时，使用 @media 查询来定义您想要停止 float 的宽度 - 添加 float:none 或 auto。然后你可以垂直堆叠它们。另外，对于像 Logo 这样的图像，请确保包含 img {max-width:100%;} - 这将使它们能够很好地缩放。

media query

@media (min-width: 1100px) {
  body {
    width:50%;
  }
}
@media (max-width: 1100px) {
  div {
    width:40%;
  }
}
@media (max-width: 480px) {
  div {
    width:20%;
  }
}