1

我依靠 CSS 属性overflow:hidden来包含 3 个嵌套 & 浮动divs。overflow:hidden应用于此 html 的父级div。

当我不使用时，overflow:hidden我的 lastdiv在一行 float 中不合适div，但是当我使用时overflow:hidden，整个div结构向下移动。

希望有人能理解我上面文字的意思，但如果不是，我也会提供 CSS 代码。

CSS：

#header {
  display: block;
  width: 590px;
  height: 50px;
  background: #336699;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  overflow: hidden;
}

.header-left-wrapper {
  float: left;
  width: 150px; height: 50px;
  background: #ff0000;
}
.header-input-wrapper {
  float: left;
  width: 300px; height: 50px;
  background: #00ff00;
}
.header-right-wrapper {
  float: right;
  width: 140px; height: 50px;
  background: #ff0000;
  overflow: hidden;
}

澄清一下，由于某种原因，当我申请overflow:hidden时.header-right-wrapper，整个标题向下移动，就好像我刚刚申请了marginor一样position。有什么帮助吗？提前致谢。

4

1 回答 1

0

.header-right-wrapper 正在下降，因为作为浮动元素，它需要清除页面上的其他内容（.close）。当你给#header {overflow: hidden} 它被迫包含它的孩子，至少到它达到它的{height}，包括那个浮动的div。因此它向下移动。问题不是您与#header 相关的标记，而是整个灯箱布局。这是一个修复：

.close {margin-bottom: -100px;}

http://jsfiddle.net/ZETus/4/

另一种方法是使用绝对定位将 .close 从流中取出，这样浮动就不必清除它：

http://jsfiddle.net/ZETus/5/

.close {
    position: absolute;
    right: -10px;
    top: -10px;
}
于 2013-02-15T04:09:33.637 回答