0

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

4

2 回答 2

0

从 中删除float属性#centerDoc，并添加margin-left: 20%.到它

然后更改min-width: 20%为#navigation或width: 20%。max-width: 20%没有这个，里面的文本centerDoc在#navigation.

您可能希望保持测量同步。你有width: 80%in#centerDoc和min-widthin #navigation。如果您width在两种情况下都使用 plain 并将min/max-width属性分配给页面的 （因此和body的宽度相对于它们的共同父级），则可能更容易描绘布局。#navigation#centerDoc

编辑：CSS：

#navigation {
  float: left;
  width:20%;
}
#centerDoc {
  width: 80%;
  margin-left:20%;
}
#header{
  width:100%;
  height:96px;
}
#container { 
  max-width: 1200px;
  min-width: 600px;
}

删除了#wrapper. 以百分比形式查看max-/min-width´ in the#container . 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 thewidth s of the#navigation and#centerDoc`。

使用以下 HTML，一切都应该正常工作。（虽然我不知道里面是什么nav.php。希望没有什么可以清除浮动的#navigation）

<div id="container">
  <?php //require_once 'includes/header.php';?>

<div id="navigation">
  <?php //require_once 'includes/nav.php'; ?>
  <p>Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div>  <!--navigation !-->

<div id="centerDoc">
  <p>Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div>  <!--centerDoc !-->
</div> <!--container !-->
于 2012-05-27T11:09:26.663 回答
0

我会将#navigation 中的最小宽度更改为最大宽度。这样我们就可以确保左侧导航栏的宽度不超过页面宽度的 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;
}
于 2012-05-27T10:23:59.127 回答