使用CSS浮动DIV

Question

我有两个div格式为面板。一个是主面板，而另一个是侧边栏。我希望侧边栏向左浮动，但后者嵌入主div内。我希望它显示在主面板旁边，而不是在其中。

我知道我可以将侧边栏向左移动，主面板向右移动并在其后添加更多内容并使用clear: both使页面调整大小并正确滚动;然而，这听起来像是一个黑客，它需要指定两个面板的大小。如果我只能将侧边栏浮动到左侧，那么主面板会自动调整大小以覆盖页面的其余部分。

我的HTML代码目前看起来像这样：

<div id="sidebar" class="panel">
    Sidebar
</div>

<div id="content" class="panel">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</div>

感兴趣的CSS是：

#sidebar {
    float: left;
    width: 30%;
}

在下面的屏幕截图中，可以很容易地看到侧边栏浮动到左侧，但在主面板中以某种方式。但是，在HTML代码中，侧边栏显然位于主面板之外。如何在不必在主面板上使用float: right的情况下解决这个问题？

Answer 1

如果flexbox是一个选项，您可以让主面板覆盖水平空间的其余部分：

1. 在包装元素上指定display: flex（下面的演示中为body）

2. 将flex: 1添加到主面板，以便增长以适应剩余可用空间。

请参阅下面的简化演示：

＆＃13;
＆＃13;
body {
  display: flex;
}

.panel {
  border: 1px solid;
}

#sidebar {
  width: 30%;
}

#content {
  flex: 1;
}
＆＃13;
<div id="sidebar" class="panel">
  Sidebar
</div>

<div id="content" class="panel">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

#sidebar {
  width: 30%;
  float: left;
  border: 1px solid black;
}

#content {
  float: right;
  width: 70%;
  border: 1px dashed blue;
}

.clearfix:after,.clearfix:before {
  display: table;
  content: '';
  clear: both;
}

＆＃13;

<div class="clearfix">
  <div id="sidebar" class="panel">
    Sidebar
  </div>

  <div id="content" class="panel">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你想使用浮点数 - 你应该为两个块使用浮点数，因为浮动＆＃34;创建自己的流量＆＃34;，这就是你覆盖的原因。

但我建议你使用之前提到过的flexbox，因为它是非常强大的技术，得到了广泛的支持。 根据这个网站https://caniuse.com/#search=flexbox，全球96.63％的设备都支持使用flexbox。

Answer 3

@Angelos你可以使用旧的表格布局，所以左边的部分有一个固定的宽度，右边的部分占用了所有剩余的可用空间..