[英]<DIV> moving down on Window Resize
我的right_section div有问题。 当我调整浏览器窗口的大小时,它会保留在右侧,但是当我达到某个大小时,它会降到其他所有内容之下,并继续压缩以缩小其中的文本。
调整浏览器窗口大小时,如何使right_section保持在原位?
CSS:
#wrapper {
background-color: #fff;
margin: 80px auto auto auto;
max-width: 1300px;
border: 2px solid #5B5B5B;
padding: 20px;
box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
border-radius: 20px;
}
#container {
background-color: #fff;
overflow: auto;
}
#header {
margin: 0;
}
#logoarea {
position: absolute;
top: 3%;
left: 46%;
}
#logoarea img {
border-radius: 50%;
border: 4px solid rgba(155,155,155,0.7);
}
#header {
margin: 0;
}
#header h1 {
margin: 0;
text-align: left;
font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
font-size: 22px;
color: #000000;
padding: 1%;
text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
}
nav {
margin: 0;
width: 290px;
float: left;
}
#right_section {
margin: 0px 0 0 6px;
width: 74%;
float: right;
height: auto;
position: relative;
overflow: relative;
}
#right_section p {
padding: 20px;
}
#footer {
margin: 0;
}
#footer p {
margin: 0;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
font-size: 12px;
padding: 2% 0%;
}
HTML:
<body>
<!--Start Wrapper-->
<div id="wrapper">
<!--Start Container-->
<div id="container">
<!--Start logoarea-->
<div id="logoarea">
...
</div>
<!--End logoarea-->
<!--Start header-->
<div id="header">
...
</div>
<!--End header-->
<!--Start Nav-->
<nav>
...
</nav>
<div id="right_section">
</div>
</div>
<!--End container-->
</div>
<!--End wrapper-->
</body>
感谢您提前提供的所有帮助。
您可能要使用css属性
white-space: nowrap;
更改nav{ margin:0; width:290px; float:left; }
nav{ margin:0; width:290px; float:left; }
nav{ margin:0; width:290px; float:left; }
到nav{ margin:0; width:26%; float:left; }
nav{ margin:0; width:26%; float:left; }
将#right_section {margin: 0px 0 0 6px;}
更改为#right_section {margin: 0px 0 0 0px;}
我认为问题的主要部分是数学:
max-width: 1300px;
width: 290px;
(又称导航): width: 290px;
margin: 0px 0 0 6px;
+ width: 74%;
在某个点上,290px大于(1300px减去(74%加6px));
有两件事。
1.将左侧设为百分比: width:24%;
2.但是如果不补偿margin
,那将不起作用,因此将右侧更改为margin: 0px 0 0 6px;
+ width: calc(74% - 6px);
我不知道您需要支持的浏览器,但是您应该为calc()引用canIUse
综上所述,这是使用display:flex;
一个很好的例子display:flex;
有!
CODEPEN
HTML:
<div id="wrapper">
<div id="container">
<div id="logoarea">LOGO AREA</div>
<div id="header">HEADER</div>
<nav>MAIN NAVIGATION</nav>
<div id="right_section">RIGHT SECTION</div>
</div>
</div>
CSS:
#wrapper {
background-color: #fff;
margin: 80px auto auto auto;
max-width: 1300px;
width:100%; // <== to always fill parent
border: 2px solid #5B5B5B;
padding: 20px;
box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
border-radius: 20px;
box-sizing:border-box; // <== puts the padding inside the box
}
#container {
background-color: #fff;
display:flex; // <== flex ftw
flex-wrap:wrap; // <== wrap that flex
}
#logoarea {
position: absolute;
top: 3%;
left: 46%;
}
#header {
margin: 0;
width:100%; // <== full width. I assume this was the goal
background: rgba(255,0,0,0.1); // <== just to see the box
text-align center; // again, an assumption
}
nav {
width: 26%;
background: rgba(0,255,0,0.1); // <== just to see the box
}
#right_section {
margin: 0px 0 0 6px;
width: calc(74% - 6px); // <== use calc to compensate for the margin
background: rgba(0,0,255,0.1); // <== just to see the box
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.