Question

我希望我的网站尽可能灵活，我的意思是各种分辨率（从常规平板电脑分辨率到全高清）都会很好看。我的div元素非常好，但是我有两个并排的“盒子”问题：当我调整浏览器窗口大小（显示较低的分辨率）时，右侧的框会在左侧框下方下降。标识和导航很好，所以最后会做正确的方框。但它并没有像我想的那样马上做到。

我的网站结构如下所示：

<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 = left，oikea = right，alapalkki = footer，teksti = text）

DEMO on JSFIDDLE 谢谢你！

Answer 1

只需使用显示：内嵌而不是浮动：左，并避免修复值使用宽度百分比 google min-width < / strong>和 max-width

Answer 2

躲回kougiland;使用百分比的百分比。然后，当它们缩小到太小的大小时，使用@media查询来定义您想要停止浮动的宽度 - 添加一个float：none或auto。然后你可以垂直堆叠它们。此外，对于像您的徽标一样的图像，请确保包含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%;
  }
}

Answer 3

你必须使用一个位置为relative的包装器;显示：内联;浮动：无; 看到工作jsfiddle

.menuWrapper
{
  width:770px;min-width:770px;
  height:100%;  
  position:relative; display:inline;float:none;
  color:#e2f2fe;
}

- 我不使用溢出：隐藏的解决方案，因为在滚动时我更希望div的一部分可见而不是隐藏

Answer 4

我有一个非常相似的情景。我在左边有表格数据，然后是右边的内容框。我同样想重新调整浏览器的视口大小，而不会将我的内容DIV放在窗体下面...至少在屏幕达到一定大小之前。我希望内容DIV缩小，直到达到预先定义的最小宽度，然后再没有了。

Bansoa的回答让我了解了一部分。但为了防止右侧DIV的边界溢出左侧，我不得不再添加一个样式规则：

**overflow: auto;**

如果您在框中有元素或框本身的边框，请尝试使用它，溢出左侧框元素。

在调整浏览器窗口大小时，如何防止div元素下降？

4 个答案: