当前位置：文江博客话题详情

CSS css-float

清除 css 浮动未按预期工作

发布于 2024-12-28 00:52:29 字数 3214 浏览 0 评论 0 原文

我读过几篇关于此的文章，例如 http://css-tricks.com/all- about-floats/ 或 http://www.sitepoint.com/simple-clearing-of-floats/ 都提出了相同的技巧，但它们对我不起作用。 HTML：

<html>
    <head>
    <body>
        <div id="wrapper">
            <div id="head">
                <div id="columns">              
                    <div id="result_wrapper" class="dataTables_wrapper">
                        <div id="result_length" class="dataTables_length">
                        <div class="dataTables_scroll">
                            <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0pt none; width: 100%;">
                                <div class="dataTables_scrollHeadInner" style="width: 1017px;">
                            </div>
                            <div class="dataTables_scrollBody" style="overflow: auto; height: 570px; width: 100%;">
                                <table id="result" style="margin-left: 0pt; width: 100%;">
                            </div>
                    </div>
                    <div id="result_info" class="dataTables_info">Showing 1 to 2 of 451 entries</div>
                    <div id="result_paginate" class="dataTables_paginate paging_full_numbers">
                </div>
            </div>
            <div id="foot">
        </div>
    </body>
</html>

我的页脚 div 有一个被忽略的顶部边距，或者边距是根据错误的元素计算的。页脚出现在容器 div 内，而不是在其下方。 IE8 和 FF 9.0.1 中的问题是相同的

有什么想法吗？

编辑：

CSS：

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}
div#foot {    
    position: relative;
    width: 1000px;
    margin-top: 30px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;
    overflow: auto;
}

div#wrapper {

    position:relative;

    margin-left:auto;

    margin-right:auto;

    top: 20px;

    width:1000px;

}

注意：我正在使用数据表插件。 html 的一部分是由该插件生成的（包括内联样式）。其 CSS 太长，无法在此处完整发布。

一些数据表 css：

.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    width: 44px;
    * width: 50px;
    float: right;
    text-align: right;
}

编辑 2：

应用 Scotts 修复后问题的屏幕截图（这也没有帮助）

div id=

Firebug HTML Panel

请注意，列中的标记是在 JQuerys $(document).ready 函数中创建的。也许这会导致问题？

编辑3：

我尝试了jsFiddle，但是虽然清晰的浮动修复在那里工作，但它们会破坏数据表的显示。

应用了斯科特的清除浮动技巧： http://jsfiddle.net/yApAh/6/

页脚正确，但表格的其余部分没有明确的技巧是错误的

： http://jsfiddle.net/yApAh/7/

这里页脚错误，但数据表显示为想要的。

原文

I've read several articles about this like http://css-tricks.com/all-about-floats/ or http://www.sitepoint.com/simple-clearing-of-floats/ and all suggest the same tricks but they do not work for me.
HTML:

<html>
    <head>
    <body>
        <div id="wrapper">
            <div id="head">
                <div id="columns">              
                    <div id="result_wrapper" class="dataTables_wrapper">
                        <div id="result_length" class="dataTables_length">
                        <div class="dataTables_scroll">
                            <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0pt none; width: 100%;">
                                <div class="dataTables_scrollHeadInner" style="width: 1017px;">
                            </div>
                            <div class="dataTables_scrollBody" style="overflow: auto; height: 570px; width: 100%;">
                                <table id="result" style="margin-left: 0pt; width: 100%;">
                            </div>
                    </div>
                    <div id="result_info" class="dataTables_info">Showing 1 to 2 of 451 entries</div>
                    <div id="result_paginate" class="dataTables_paginate paging_full_numbers">
                </div>
            </div>
            <div id="foot">
        </div>
    </body>
</html>

My footer div has a margin-top which is ignored or the margin is calculated from the wrong element. The footer appears within the container div instead below it. Issue is identical in IE8 and FF 9.0.1

Any ideas?

EDIT:

CSS:

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}
div#foot {    
    position: relative;
    width: 1000px;
    margin-top: 30px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;
    overflow: auto;
}

div#wrapper {

    position:relative;

    margin-left:auto;

    margin-right:auto;

    top: 20px;

    width:1000px;

}

Note: I'm using datatables plugin. part of the html is generated by that plugin (including the inline styles.
The css for that is too long to fully post here.

Some datatables css:

.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    width: 44px;
    * width: 50px;
    float: right;
    text-align: right;
}

EDIT 2:

Screenshot of the issue after applying Scotts fix (which does not help either)

div id="columns"

div id="foot"

Firebug HTML Panel

Note that the markup in columns is created in JQuerys $(document).ready function. Maybe that causes the issue?

EDIT 3:

I tried jsFiddle however while the clear float fixes work there they disrupt the display of the datatable.

clear float trick from scott applied:
http://jsfiddle.net/yApAh/6/

footer is right but the rest of the table is wrong

without clear trick:
http://jsfiddle.net/yApAh/7/

here footer is wrong but datatable is displayed as desired.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

臻嫒无言 2025-01-04 00:52:29

我建议将您的 CSS 代码发布到公司，至于您的页脚，请在页脚上方设置另一个分隔线，以清除所有浮动

 <div style="clear:both; height: 1px;"></div>

然后边距将在页脚上起作用。

I'd suggest posting your CSS code to acompany this, as for your footer set another divider above the footer that clears all floats

 <div style="clear:both; height: 1px;"></div>

Then the margin will work on the footer.

回复收藏 0 原文

顾北清歌寒 2025-01-04 00:52:29

哪些位是浮动的？如果 div 位于 #columns 内，则需要使用 overflow:hidden 而不是 overflow:auto

回复收藏 0 原文

撞了怀 2025-01-04 00:52:29

始终使用“简单清除方法”，因为它适用于所有情况和所有浏览器模式。

#columns:before, 
#columns:after { 
   content: ""; 
   display: table; 
}
#columns:after { 
   clear: both; 
}
#columns { 
   *zoom: 1; 
}

如果您愿意，可以查看我的 css 框架。

Always use the 'The Easy Clearing Method' as it works in all cases and all browsers in all modes.

#columns:before, 
#columns:after { 
   content: ""; 
   display: table; 
}
#columns:after { 
   clear: both; 
}
#columns { 
   *zoom: 1; 
}

If you like you can check out my css framework .

回复收藏 0 原文

~没有更多了~

关于作者

无声静候

暂无简介

文章

446 人气

关注发私信

友情链接

文江博客

清除 css 浮动未按预期工作

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

清除 css 浮动未按预期工作

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。