当我开始最小化窗口时,我的身体div在左栏导航下折叠。
有人可以告诉我我做错了什么或者我还需要做些什么。
非常感谢,谢谢。
css片段:
#navigation {
float: left;
min-width: 20%;
margin: 0;
margin-top: 5px;
font-weight: normal;
}
#centerDoc {
float: left;
width: 80%;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 0px;
}
#header{
position: relative;
width:100%;
height:96px;
margin-left: 5px;
}
#footer {
font-family: Trebuchet MS;
font-size: x-small;
padding:2px;
margin:0px;
background-color:#CBE3F6;
color:#fff;
border-bottom: 1px solid #9EC4E2;
border-top: 1px solid #9EC4E2;
text-align:center;
width: 100%;
}
#wrapper{
position: relative;
margin-left: 5px;
}
#container {
width: 100%;
height:100%;
}
网页模板:
<?php require_once 'includes/header.php';?>
<div id="wrapper">
<?php require_once 'includes/nav.php'; ?>
<div id="centerDoc">
</div> <!--centerDoc !-->
</div> <!-- wrapper !-->
</div> <!--container !-->
</body>
答案 0 :(得分:0)
我会将#navigation中的min-width更改为max-width。 这样我们就可以确保左侧导航栏的宽度不超过页面宽度的20%。
编辑:
#navigation {
float: left;
width: 20%;
margin: 0;
margin-top: 5px;
font-weight: normal;
}
#centerDoc {
float: right;
width: 80%;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 0px;
}
答案 1 :(得分:0)
从float
移除#centerDoc
属性,并向其添加margin-left: 20%.
然后将min-width: 20%
中的#navigation
更改为width: 20%
或max-width: 20%
。如果没有这个,centerDoc
内的文字会在#navigation
。
您可能希望保持测量同步。您在width: 80%
中有#centerDoc
,min-width
有#navigation
。如果您在两种情况下都使用普通width
并将min/max-width
属性分配给页面的body
,则可能更容易对布局进行描绘(因此{{1}的宽度}}和#navigation
相对于它们的共同父项。)
编辑:CSS:
#centerDoc
删除了#navigation {
float: left;
width:20%;
}
#centerDoc {
width: 80%;
margin-left:20%;
}
#header{
width:100%;
height:96px;
}
#container {
max-width: 1200px;
min-width: 600px;
}
。请将#wrapper
#container max-/min-width´ in the
width . The scrollbars appear into the browser when the page is less then 600 pixels wide. The page also doesn't become wider then 1200 px. This allows you to define the
#navigation s of the
#centerDoc`视为百分比。
使用以下HTML,一切都应该正常工作。 (虽然我不知道and
里面是什么。希望没有什么可以清除nav.php
的浮动
#navigation