Html 左下浮动条

我正在努力实现这个布局

 _______________________
|                       |
|        Table 1        |
|_______________________|
 _______________________
|                       |
|        Table 2        | 
|_______________________|  ___________________
                          |                   |
                          |    bottom bar     |
                          |___________________|  

底部栏必须始终位于页面底部表格右侧

这就是我目前所拥有的

我有这个html

<div class="container">
    <div class="tables">
        <div id="table1" class="box">
            <table><tr><td>table 1</td></tr></table>
        </div>
        <div id="table2" class="box">
            <table><tr><td>table 2</td></tr></table>
        </div>
    </div>
    <div class="bottombar box"> bottom bar</div>
</div>

这是链接

---

问题是，底部栏与表重叠，但它必须保持在表的右侧。如果移除“位置固定”，则底部栏将保持在桌子的右侧，但不再附着到底部。有谁能指导我解决这个问题吗？谢谢。

我真的不知道这是否有用，但我将所有内容都包含在一个表中：

（1）尝试分配浮点：对；到底部的css栏，您可以使用边距来正确定位它

（2） 您可以在底部栏中创建另外两个div，并使其向右和向左

很难说出你想要的是什么样的最终结果，但这会让你进一步了解它：D

---

希望这对你有帮助

请记住，使用百分比值的边距值是相对于包含元素的。为了达到预期效果，只需对代码进行一些小的更改：

<div class="container">
    <div class="tables">
        <div id="table1" class="box">
            <table><tr><td>table 1</td></tr></table>
        </div>
        <div id="table2" class="box">
            <table><tr><td>table 2</td></tr></table>
        </div>
    </div>
    <div class="bottombar"><div class="box">bottom bar</div></div>
</div>

您可能需要添加

.container{overflow:hidden；}

以清除浮动

预览：

编辑：

要使其粘贴在页面底部，只需将以下内容添加到

.bottombar

：

position: fixed;
bottom: 0;

---

请参阅：

如果我理解正确，请将

设置为左：102px到
。底部栏
应该可以解决您的问题。由于要在表格上设置特定的宽度，因此可以非常轻松地设置要偏移的左侧位置

也就是说，我不确定你想要完成什么，但看起来它可能与一个问题有关。我建议您调查一下这是否能解决您的问题。
您对此有何评论？我想它被删除了。这是固定的还是流动的布局？你能以任何方式修改HTML吗？@wex是的。我可以更改html，但我更喜欢为容器保留一个div。我想使用css浮动。我不想用桌子装容器。但这个解决方案确实有帮助。你希望底部栏正好位于表格的右侧，还是可以位于页面的右侧？我确实希望它正好位于表格的右侧，但我很好奇，如果它可以设置在页面的右侧，它会是什么样子。实际上，我最终使用了表格解决方案，但如果您遇到div float解决方案，请更新您的答案。您不必接受答案，直到您觉得答案符合您的喜好。表格的宽度不是固定的。我在问题中设置它们只是为了给它们一些宽度。@Chaos教授底栏的高度是静态的吗？谢谢Wex；但是底部的滚动条似乎并没有停留在底部。哦，哎呀，我不明白问题的那一部分。更新了我的答案。
.tables { float: left; }
.box {
    width: 100px;
    height: 150px; 
    border: 1px solid #ddd; }
.bottombar{
    float: left;
    clear: both; }
.bottombar .box { margin: 0 0 0 100%; }

position: fixed;
bottom: 0;