我已经开始设计一个Web模板,我遇到了容器中的问题,每当我最小化浏览器时,它看起来混合并进入另一个地方。我试图让它看起来像记事本++。
您可以在此处查看我的输出:http://jsfiddle.net/Razor_01100/TLkTt/embedded/result/
CSS
body {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#333;
padding: 0;
margin: 0;
}
#wrapper {
position: relative;
height:auto !important;
height:100%;
min-height:100%;
min-width:1000px;
}
#container {
width: 300px;
float: left;
background-color: #0096ff;
margin: 0;
padding: 0;
}
#container2 {
width: 200px;
float: left;
background-color: #5f5f5f;
margin: 0;
padding: 0;
}
#container3 {
width: 849px;
float: left;
background-color: #313131;
margin: 0;
padding: 0;
}
ul#nav {
list-style-type: none;
}
.text-container3 {
color: white;
}
#footer {
}
HTML
<div id="wrapper">
<div id="container">
</div>
<div id="container2">
<div id="nav-wrapper">
<ul id="nav">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">About us</a></li>
<li><a href="#" title="">X-Design</a></li>
<li><a href="#" title="">X-Photography</a></li>
<li><a href="#" title="">X-Programming</a></li>
<li><a href="#" title="">X-Event</a></li>
<li><a href="#" title="">Contact us</a></li>
</ul>
</div>
</div>
<div id="container3">
</div>
<div id="footer">
</div>
</div>
答案 0 :(得分:1)
我想你只需设置你的包装div CSS
# wrapper
{
position:relative;
margin:0 auto;
}
我希望这会有所帮助
答案 1 :(得分:0)
这有两个部分,第一部分是浮动,第二部分是定位。
您正在使用花车。如果它们的总尺寸不适合窗口,它们会自动移动以适应它们可以填充的任何空间。 Aka,如果您更改窗口大小并导致不合适的格式化,它们会移动。我建议使用display:block
(将元素放在自己的行上)或display: inline-block; vertical-align: top;
(以获得与浮点相同的功能)。你可以获得更多控制权,一般来说这是更好的做法。
然而,这不会解决对齐问题,因此转到第2部分,位置。由于您的包装器是相对的,您可以使所有子div的绝对位置:
#wrapper div{
display: inline-block;
vertical-align: top;
position: absolute;
}
绝对将div放在您想要的与父级相关的精确坐标上。然后手动设置子项的位置(#container,#container2,#container3)。无论屏幕大小如何变化,这都将确保它们不会移动。
#container { left: 0px; ... }
#container2 { left: 300px; ... }
#container3 { left: 500px; ... }
你可能还想添加“top”(默认为0px),但随意玩。