<DIV>在窗口调整大小上向下移动
[英]<DIV> moving down on Window Resize
问题描述
I have a problem with my right_section div. 
我的right_section div有问题。 When I resize the browser window, it stays on the right side, but when I hit a certain size it drops down below everything else and continues to compress scrunching up the text within. 当我调整浏览器窗口的大小时，它会保留在右侧，但是当我达到某个大小时，它会降到其他所有内容之下，并继续压缩以缩小其中的文本。
How can I get right_section to stay in place when I resize a browser window ? 调整浏览器窗口大小时，如何使right_section保持在原位？
CSS: 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: 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>
Thanks for any and all help in advance. 感谢您提前提供的所有帮助。
3 个解决方案
解决方案1
0 2015-05-27 16:47:12
您可能要使用css属性
white-space: nowrap;
解决方案2
0 已采纳 2015-05-27 16:48:52
change 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:290px; float:left; } to nav{ margin:0; width:26%; float:left; } nav{ margin:0; width:290px; float:left; }到nav{ margin:0; width:26%; float:left; } nav{ margin:0; width:26%; float:left; }
change #right_section {margin: 0px 0 0 6px;} to #right_section {margin: 0px 0 0 0px;} 将#right_section {margin: 0px 0 0 6px;}更改为#right_section {margin: 0px 0 0 0px;}
解决方案3
0 2015-05-27 17:13:26
I think the main part of the problem is the math: 我认为问题的主要部分是数学：
- SHELL (aka #wrapper):
max-width: 1300px;外壳（又名#wrapper）： max-width: 1300px; - LEFT SIDE (aka nav):
width: 290px;width: 290px;（又称导航）：width: 290px; - RIGHT SIDE:
margin: 0px 0 0 6px;右侧： margin: 0px 0 0 6px;+width: 74%;+ width: 74%;
At a certain point, 290px is greater than (1300px minus (74% plus 6px)); 在某个点上，290px大于（1300px减去（74％加6px））；
So two things. 有两件事。
1. Make the left side a percentage: width:24%; 1.将左侧设为百分比： width:24%;
2. But that won't work without compensating for the margin , so change the right side to margin: 0px 0 0 6px; 2.但是如果不补偿margin ，那将不起作用，因此将右侧更改为margin: 0px 0 0 6px; + width: calc(74% - 6px); + width: calc(74% - 6px);
I don't know the browsers you need to support, but you should reference canIUse for calc() 我不知道您需要支持的浏览器，但是您应该为calc（）引用canIUse
All that being said, this is a great example to use display:flex; 综上所述，这是使用display:flex;一个很好的例子display:flex; with! 有！
CODEPEN CODEPEN
HTML: 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: 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.