使用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情况下修复它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> 

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> 

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

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

Answer 3

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