div浮动左侧和底部栏

Question

div浮动左侧和底部栏

3

我想要实现这个布局

 _______________________
|                       |
|        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链接。

问题在于底部栏与表格重叠，但必须保持在表格右侧。如果我去掉固定位置，底部栏会停留在表格右侧，但不再附着在底部。有没有人能指导我解决这个问题？谢谢。

- Professor Chaos

你的评论又是什么来着？我想它被删除了。 - blake305

这是为固定布局还是流式布局？ - Wex

你能以任何方式修改HTML吗？ - Wex

@wex 是的。我可以更改 HTML，但我更喜欢保留一个 div 作为容器。 - Professor Chaos

4个回答

1

我不太确定这是否有帮助，但我把所有内容都放在了一个表格中：http://jsfiddle.net/eJw5z/2/

- blake305

我想使用CSS浮动。我不想使用表格作为容器。但这个解决方案肯定会有所帮助。 - Professor Chaos

您希望底部栏位于表格的右侧，还是可以放在页面的右侧？ - blake305

我希望它能够位于表格的右侧，但我很好奇如果它可以设置在页面的右侧会是什么样子。 - Professor Chaos

实际上，我最终使用了表格解决方案，但如果你找到了div浮动解决方案，请更新你的答案。 - Professor Chaos

好的，我会的！我正在努力找到一个，不用担心。 - blake305

显示剩余2条评论

0

（1）尝试将float：right;分配给底部栏css，您可以使用边距将其正确定位。

（2）您可以在底部栏中创建2个附加的div，并使它们靠右和靠左。

很难确定您真正想要的最终结果是什么，但这应该可以让您更接近解决问题的道路:D

希望这可以帮助您！

- user1132490

0

如果我理解正确的话，将 left: 102px; 设置给 .bottombar 应该可以解决您的问题。因为您正在设置表格的特定宽度，所以可以非常容易地设置一个左侧位置来进行偏移。

话虽如此，我不确定您想要实现什么，但看起来可能与 CSS Sticky Footer 有关。我建议您研究一下是否可以解决您的问题。

- LoveAndCoding

表格的宽度并不是固定的。我只是在问题中设置了一些宽度。 - Professor Chaos

@ProfessorChaos 底部栏的高度是静态的吗？ - LoveAndCoding

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wex · Accepted Answer

请记住，使用百分比值的外边距的值是相对于包含元素的。为了实现您想要的效果，您只需要对代码进行一些小的更改：

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