Question

当我开始最小化窗口时，我的身体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>

Answer 1

我会将#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;
}

Answer 2

从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

最小化html＆amp;网页时网页崩溃CSS

2 个答案: