html - 使用 CSS 向左浮动一个 DIV

Question

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

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

我的 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 添加到主面板，以便 增长 以适应剩余的可用空间。

请参阅下面的简化演示:

body {
  display: flex;
}

.panel {
  border: 1px solid;
}

#sidebar {
  width: 30%;
}

#content {
  flex: 1;
}

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

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