我想在一个页面上有两个浮动的div，它们的组合宽度填满了浏览器窗口的整个宽度。我希望一个div的固定宽度为15em并显示在左侧。我称之为侧边栏div。我希望另一个div 动态使用其余的可用宽度，并显示在右侧。我称之为主要内容div。
我希望主要内容div 的宽度填充侧边栏div 未使用的所有可用宽度，即使主内容div 中没有任何内容需要所有可用宽度，我也希望发生这种情况。
更复杂的是，我希望在侧边栏div 之前对主要内容div 进行编码，但我希望侧边栏div 显示在右侧主要内容div 之前的左侧。这种复杂性使我的问题与我从其他用户那里找到的其他类似问题不同。
我让一切都按照我想要的方式运行，除了在没有内容需要主要内容div 的完整可用宽度的页面上。例如，如果我在 p 中有一行文本换行到下一行，因为它比可用宽度长，那么一切都会按预期运行。当 p 中的文本行不够长，无法利用可用于主要内容div 的全部宽度时，主要内容div 的宽度仅与其内容所需的宽度一样宽，并且它挂在页面右侧，在侧边栏和主要内容div 之间留下很大的空白空间。
.right-main-content {
float: right;
text-align: left;
margin-left: 16em;
padding: 0;
background: red
}
.left-sidebar {
float: left;
text-align: left;
width: 15em;
margin-right: -15.5em;
background: green
}<body>
<div class="right-main-content">
<p>
This is the right main content div.
</p>
<p>
</div>
<div class="left-sidebar">
<p>this is the left sidebar div</p>
<p>with a fixed width of 15em</p>
</div>
</body>我建议使用100%父级减去左侧边栏15em宽度的计算驱动width。这可以通过使用calc((来实现：
.right-main-content {
float: right;
width: calc(100% - 15em);
background: red;
}
.left-sidebar {
float: left;
width: 15em;
background: green;
}<body>
<div class="right-main-content">
<p>
This is the right main content div.
</p>
<p>
</div>
<div class="left-sidebar">
<p>this is the left sidebar div</p>
<p>with a fixed width of 15em</p>
</div>
</body>这样，您只需要指定两个width和float属性。
另请注意，您不需要text-align: left，因为它默认是左对齐的。
希望这有帮助！ :)
您可以使用 CSS 和视口大小排版中的calc来设置右侧div 的宽度。
根据您的示例，请尝试以下操作：
.left-sidebar {
width:15em;
float:left;
}
.right-main-content {
width:calc(100vw - 16em);
float:right;
}
这是我创建的一个例子。 https://codepen.io/florinsimion/pen/eEYoeX
您可以尝试仅浮动div.left-sidebar，并使div.right-main-content的右边距值与宽度相同div.left-sidebar如下所示：
.right-main-content {
text-align: left;
margin-left: 15em;
padding: 0;
background: red;
width:100%;
}
.left-sidebar {
float: left;
text-align: left;
width: 15em;
background: green
}
见 https://jsfiddle.net/w0azuoLq/