1

我一直在尝试创建网页布局，但遇到了这个问题。

<div id="pageWrapper">
  <div id="pageHeader">
  </div><!-- end of pageHeader -->

  <div id="navTab">
    <div class="navButtons"></div>
  </div><!-- end of navTab -->
</div><!-- end of wrapper -->

我的CSS看起来像

#pageWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#pageHeader {
  width:100%;
  height:7%;
  color:#DADADA;
  float:left; 
}

#navTab {
  width:100%;
  height:6%;
  background-color:#000000;
  float:left;
}

.navButtons{
  width:100px;
  height:90%;
  margin:5%;
  background-color:#ffffff;
  float:left;
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0;
}

我正在尝试创建一个流畅的布局并尝试在宽度.navButtons内添加 div#navTab一个边距顶部和底部 5% ......但是当我在 CSS 中提供参数时，它不适合 div ......我在这里做错了什么？ ??

我添加了一个 jsbin 链接http://jsbin.com/ezeqec/1/edit

4

4 回答 4

1

嗯，尝试margin: 5%从中删除它.navButtons。如果你想要水平边距，让它margin: 0 5%;

否则，如果你也想要那个垂直边距，只需这样做：

<div id="navTab">
<div class="navButtons"></div>
<div class="clearFloat"></div> <!-- added this -->
</div><!-- end of navTab -->

CSS 更改：

.navButtons {
    width:100px;
    height:90px; /* in pixels instead of % */
    margin:5%;
    background-color:#ffffff;
}

#navTab {
        width:100px;
    height:90%; /* this should be in pixels, if you want to give % for navButtons */
    margin:5%;
    background-color:#ffffff;
}

如果你想给出height%，父元素的高度应该是固定的。父元素不能有height% 或auto.

于 2013-02-05T10:58:29.473 回答
0

如果你想navTab包含它的 child navButtons，它是浮动的，你需要添加一些 CSS 来强制元素展开。我发现最简单的是overflow:auto.

基本问题是浮动元素会使其脱离正常的文档流，因此它不会被考虑到高度/宽度计算中。

于 2013-02-05T09:16:26.850 回答
0

除 navTab 之外的所有地方都删除语句“float”。

于 2013-02-05T09:13:37.930 回答
0

将 .clearfix 分配给您的 pageWrapper，这应该可以防止您的包装器崩溃。

.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}
.clearfix { 
zoom:1; 
}

本文的第一部分是对浮动元素的一个很好的复习，但在页面的后半部分附近有一些很好的技术可以在所有子元素都浮动时防止元素折叠。

于 2013-02-05T09:18:42.663 回答