Question

我正试图定位两个面板，但却无法让它工作......

我有一个容器页面包装两个面板，每个面板都有自己的页面。我想用浮子并排放置面板。

这是我的CSS：

  .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: static;}

和HTML

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>    
 </div>

我必须使用左侧面板的 position：relative 和右侧面板的 position：static 。奇怪的是，这可以在JSBin中使用，但在我的实际页面中，右侧面板的位置：static始终具有覆盖整个屏幕的100％宽度。

有关我可能做错的任何提示？

谢谢！

Answer 1

尝试浮动两个面板？到目前为止，只有左边的一个浮动...尝试将它们两个浮动到左边，然后在它们之间放入正确数量的边距，以便按照你想要的方式排列它们。或者甚至漂浮一个左边，另一个右边可能会工作。

Answer 2

将此添加到您的CSS

div.clear-both {clear: both;}

并将您的HTML更改为：

<div class="page">
  <div id="lefty" class="leftPanel">
    <div class="page"
      <p>helloworld</p>
    </div>
  </div>
  <div id="righty" class="rightPanel">
    <div class="page">
       <p>HELLO WORLD</p>
    </div>
  </div>    
  <div class="clear-both"></div>
</div>

Answer 3

默认情况下，

div元素的宽度为其父级的100％。因为你漂浮了左撇子，所以你把它从流程中取出来了，所以发生的事情就是左撇子有效地坐在元素的流动之外。 float也会导致div收缩包装到它的子节点大小。因此，如果你想设置正确的div而不是lefty div那么你应该做两件事：首先将float:left; position:relative;添加到正确的样式中。其次，你应该在底部添加一个div来清除浮动。

另一方面，如果您要以相同的方式设置多个元素的样式，则应该只使用一个类，否则只需将该元素设置为ID。

  .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: relative; float: left;}

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>
    <div style="clear:left;"></div>    
 </div>

CSS - 使用float定位元素不起作用

3 个答案: