Question

我有几个嵌套的div：

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

wrapper style: width: 780px; margin: 20px auto; border: solid black 5px;
header style: position: relative; min-height: 125px;
body style: position: relative;
content style: position: absolute; left: 50px; top: 0px;

我在内容 div 中有许多 HTML 元素，由于某种原因，body div 和 wrapper div 在头部周围崩溃，如果我不为 body div 设置固定高度，content div 就会独自悬浮。我只有在标题中有浮动元素。

编辑

如果我刪除內容div並且直接將html元素放在主體中，主體div就停止了折疊！試圖理解為什麼-猜想可能是由於內容div的絕對位置。

有什么线索可以说明这种情况是如何发生的和如何解决的？

我看了一下这个问题，但它似乎对我无效（或者我清空了错误的位置...）。

Answer 1

在这种情况下，您不真正需要使用绝对或相对定位。

The following achieves what you need with a minimal amount of css wrangling.
Colours becuase I like colour, and so should you!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
        <style type="text/css" media="screen">
    #wrapper { 
        width: 780px; 
        margin: 20px auto; 
        border: solid black 5px;

    }
    #header { 
        min-height: 125px; 
        overflow:hidden;

    }
    #body { 
        background-color:red; 

    }
    #content { 
        margin-left: 50px;
        margin-top: 0px;
        background-color:pink; 

     }
.floatie { float:left; width:40px; height :40px; 
    margin:5px; background-color:#fe0;}

        </style>


    </head>
    <body>



        <div id="wrapper">
          <div id="header">
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
          </div>

          <div id="body">
            <div id="content">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                    sed do eiusmod tempor incididunt ut labore et dolore 
                    magna aliqua. Ut enim ad minim veniam, quis nostrud 
                    exercitation ullamco laboris nisi ut aliquip ex ea 
                    commodo consequat. Duis aute irure dolor in 
                    reprehenderit in voluptate velit esse cillum dolore eu 
                    fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia 
                    deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>

    </body>
</html>

Answer 2

试试这个。注意：header div上的overflow hidden解决了清除div的需求。不确定为什么您使用相对和绝对定位来定位内容。我认为最好用边距来处理。

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
    #header { overflow: hidden; background-color: yellow; }
    #header div { float: right; border: 2px solid red; }
    #body { position: relative; }
    #content { position: absolute; left: 50px; top: 0px;  }
  </style>
</head>
<body>
    <div id="wrapper">
      <div id="header">
        <div>One</div>
      <div>Two</div>
      <div>Three</div>
      </div>
      <div id="body">
        <div id="content">
          <p>This is some text</p>
        </div>
      </div>
    </div>
</body>
</html>

Answer 3

我使用这种样式来清除元素：

.Clear { clear: both; height: 0; overflow: hidden; }

在标题中放置一个清除浮动的div以给标题元素大小：

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
    <div class="Clear"></div>
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

将清除元素的高度设置为零将导致它本身不占用任何空间。溢出样式是为了防止IE给它一个高度，即使高度设置为零。IE有一个奇怪的想法，即每个元素都必须至少有一个字符高，设置overflow: hidden;即使元素的内容在IE中只有一个字符高，也可以保持高度为零。

Answer 4

如果您想要 #content 在 #wrapper 的边界内显示，请尝试使用此 swap 方法。请在从 #body 中删除 position:relative（或完全删除该 DIV）后尝试使用此方法。

#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}

那样，您将能够在包装器内但在#header下方看到#content显示出来。

可能是因为真的没有什么可以让#content从下面突出来。如果将#header设置为相对位置，即使将#body设置为绝对位置并将其后代设置为相对位置，#header在下方也会消失。

将#content的position:absolute更改为position:relative，则将其放置在以前的DIV下面，这种情况下是#header。

Answer 5

请尝试在标题中清除浮动元素内部。

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
    <div style="clear:both;"></div> <!-- Or use a clearfix... -->
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

只要清除元素在包含的 div 中，它就应该实现你想要的功能。

Answer 6

在具有“body”ID的DIV中添加样式“clear: both”。您还可以在“float divs”的“bunch”之后并在标题DIV的结束标签之前添加具有此样式的DIV。

Answer 7

当您想要清理某些东西时，您还需要将该元素浮动以使其正常工作。所以您将需要。

#header { clear: both; float: left; }
#body { clear: both; float: left; }

Answer 8

如果不是完全必要的话，我不喜欢使用“clear:both”。更好的解决方案是将折叠DIV的“溢出”属性设置为“自动”。

尝试一下类似的东西：

#header { float: left; overflow: auto; }

友情链接