Question

这是我的网站，如果你缩小，右边的DIV会缩小。这是CSS：

HTML

<div class="kontejner"> 
<div class="glava"> </div> 
<div class="levidiv"><br/><br/><a href=""><p class="meniji">Login</p></a><br/>
<a href=""><p class="meniji">Register</p></a> <div class="levigordiv"> </div> </div> 
<div class="vsebina"> </div> <div class="desnidiv"><br/><br/><a href=""><p class="meniji">IRC</p></a><br/>
<a href=""><p class="meniji">Scan</p></a> <div class="desnigordiv"> </div> </div>
<div class="noga"><br/><br/><a href=""><p class="meniji">Home</p></a> </div> </div>

CSS

*{
     padding : 0;
     margin : 0;
     border : 0;
}
body{
    background-image:url('Matrix.gif');
     opacity:6.6
}
.container{
     display : block;
     width : 1000px;
     overflow : auto;
     margin : 50px auto 0 auto;
}
.head{
background-image:url('logo2.jpg');
background-position:center;
background-repeat: no-repeat;   
     background-color : black;
     float : left;
     clear : none;
     height : 100px;
     width : 994px;
     border: 1px solid green;
     opacity:0.8;
}
.leftdiv{
    background-color: black;
     float : left;
     clear : none;
     min-width : 70px;
     min-height : 80px;
     border: 1px solid green;
     opacity:0.8;
}
.leftupperdiv{
    opacity:0.8;
     background-color: black;
     float : none;
     clear : both;
     height : 250px;
     width : 200px;

}
.middlecontent{
     background-color: black;
     float : left;
     clear : none;
     height : 600px;
     width : 592px;
     border: 1px solid green;
     opacity:0.8;
}
.rightdiv{
    background-color: black;
     float : left;
     clear : none;
     min-width : 70px;
     min-height : 80px;
     border: 1px solid green;
     opacity:0.8;

}
.upperrightdiv{ ---the problematic one 
     background-color: black;
     float : none;
     clear : both;
     height : 250px;
     width : 197px;
     border-right: 1px solid green;
     opacity:0.8;
}
.foot{
     background-color: black;
     float : left;
     clear : none;
     height : 100px;
     width : 994px;
     opacity:0.8;
     border: 1px solid green;
}

我认为导致错误的是rightdiv或upperrightdiv。

Answer 1

我认为将像素值四舍五入是一个问题。缩小后我得到1.111的边界和其他＆gt; 1px值为您的边框宽度。

您可以使用position:absolute来定位3＆＃39;内容＆＃39; div的。或者使容器的宽度增加几个像素。

我无法找到缩小边框时加宽边框的原因。

Answer 2

所以...如果容器（包括正文）的宽度不足以同时显示跟随它的float和static内容，则静态内容将低于漂浮而不是缠绕它。（当你的浮动元素正在下降时，看起来情况正好相反）

我在检查您网站上的元素时注意到了：

.kontejner{
     display : block;
     width: 1000px;
     overflow : auto;
     margin : 50px auto 0 auto;
}

对于所有元素，宽度可能不够宽，请将其更改为：

.kontejner{
     display : block;
     width: 1100px;
     overflow : auto;
     margin : 50px auto 0 auto;
}

它会保持在您想要的位置。

编辑：有趣......我将1100px更改为仅1017px，并且它仍然存在。

缩小时，HTML / CSS Div会下降

2 个答案: