使用 CSS 向左浮动 DIV

Question

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

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

我的 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 是一个选项，您可以让 主面板 覆盖剩余的 水平面板 space:

在包装器元素上指定display: flex（下面演示中的body）
将 flex: 1 添加到主面板，这样如果增长以适应剩余的 space 可用。

请参阅下面的简化演示：

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>

Answer 2

* {
  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;
}

<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>

如果你想使用浮动 - 你应该对两个块都使用浮动，因为浮动 "creates own flow"，这就是你叠加的原因。

但我更愿意推荐您使用前面提到的 flexboxes，因为它是一种非常强大的技术，得到了广泛的支持。根据该站点 https://caniuse.com/#search=flexbox 全球 96.63% 的设备支持使用 flexbox。

Answer 3

@Angelos 你可以使用旧的 table 布局，这样左边的部分有固定的宽度，右边的部分占据所有可用的部分 space..

使用 CSS 向左浮动 DIV

Float a DIV Left using CSS

html

css

css-float