CSS - 使用浮动元素定位不起作用

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 中有效，但在我的实际页面中，带有position:static的右侧面板始终有100 % 覆盖整个屏幕的宽度。

关于我可能做错了什么的任何提示吗？

谢谢！

Answer 1

默认情况下，div 元素的宽度为其父元素的 100%。由于您浮动了左撇子 div，因此您将其从流中取出，因此发生的情况是左撇子 div 实际上位于元素流之外。浮动也会导致 div 收缩到其子级的大小。因此，如果您想将右侧 div 设置为与左侧 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>

Answer 2

尝试浮动两个面板吗？截至目前，只有左边的一个浮动...尝试将它们都浮动到左侧，然后在它们之间放置正确的边距量，以使它们按照您想要的方式对齐。或者甚至一个向左浮动，另一个向右浮动也可能有效。

Answer 3

将其添加到您的 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>