Question

我有一个不会留下来的div，它会在父母之外旅行。我遇到麻烦的div标记为“6”。它在父母之外向右移动。

这是我的代码。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      html{
       border:1px solid;
       height:99%;
      }
      body{
       height:100%;
       margin:0;
       padding:0;
      }
      #pageWrapper{
       padding:0;
       margin:0;
       height:100%;
       position:relative;
      }
    </style>
  </head>
  <body>
    <div id="pageWrapper">
      <div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
        <div style="width:100%;height:30%;border:1px solid;">1</div>
        <div style="width:100%;height:40%;border:1px solid;">2</div>
        <div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
      </div>
      <div style="width:50%;border:0px solid;height:100%;float:right;">
        <div style="width:100%;height:40%;border:1px solid;">4</div>
        <div style="width:100%;height:40%;border:1px solid;">5</div>
        <div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
      </div>
    </div>
  </body>
</html>

Answer 1

添加位置：相对于父div或从标记为

的div中移除position：absolute

Answer 2

摆脱较低的两个div上的position:absolute;bottom:0 - 这是不必要的，并导致你的不稳定行为。

Div不会留在框架内

2 个答案: