Question

我正在尝试实现此布局

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

这对于css

.container{ height: 1000px}
.tables{float: left}
.box{border: 1px solid #ddd; height:150px; width: 100px;}
.bottombar{float: left; position: fixed; bottom: 10px;}

以下是jsfiddle链接

问题是底栏与表重叠，但它必须保持在表的右侧。如果我移除固定位置，则底部栏位于桌子的右侧，但不再连接到底部。任何人都可以指导我解决这个问题吗？感谢。

Answer 1

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

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

CSS：

.tables { float: left; }
.box {
    width: 100px;
    height: 150px; 
    border: 1px solid #ddd; }
.bottombar{
    float: left;
    clear: both; }
.bottombar .box { margin: 0 0 0 100%; }

您可能需要添加.container { overflow: hidden; }来清除浮动广告。

预览：http://jsfiddle.net/Wexcode/9bZDx/

编辑：

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

position: fixed;
bottom: 0;

请参阅：http://jsfiddle.net/Wexcode/9bZDx/3/

Answer 2

我真的不知道这是否会有所帮助，但我将所有内容都包含在表格中：http://jsfiddle.net/eJw5z/2/

Answer 3

（1）尝试指定float：right;到底部条形css，您可以使用边距正确定位。

（2）你可以在底栏中创建2个额外的div并使它们正确和左

很难说出你想要的是什么样的真实最终结果，但这应该让你在未来的路上找出它：D

希望这能帮到你！

Answer 4

如果我理解正确，将left: 102px;设置为.bottombar可以解决您的问题。由于您在表格上设置了特定的宽度，因此您可以非常轻松地设置要从中偏移的左侧位置。

那就是说，我不确定你要完成什么，但看起来它可能与CSS Sticky Footer有关。我建议调查一下是否可以解决您的问题。

div浮动左下杆

4 个答案: