html – 使用float [div]时Div崩溃_html-js-css

概述参见英文答案 > Floating elements within a div, floats outside of div. Why? 9个我有以下HTML,我想在按钮和文本后面显示蓝色背景.不幸的是,使用以下代码,蓝色背景消失.如果我删除了ids按钮和文本的CSS,则背景会回来. 我究竟做错了什么？谢谢！ <!DOCTY 参见英文答案 > Floating elements within a div,floats outside of div. Why?9个
我有以下HTML,我想在按钮和文本后面显示蓝色背景.不幸的是,使用以下代码,蓝色背景消失.如果我删除了IDs按钮和文本的CSS,则背景会回来.

我究竟做错了什么？

谢谢！

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" ><head>    <Title>UnTitled Page</Title>    <style>    #actions    {        background: blue;    }    #buttons    {        float: left;    }    #text     {        float: right;    }    </style></head><body>        <div ID="actions">            <div ID="buttons">                <input type="button" ID="btnOne" value="Bla bla" />                <input type="button" ID="btnTwo" value="Bla bla bls" />            </div>            <div ID="text">Bla bla bla</div>        </div></body></HTML>

解决方法你必须“清除”你的花车.浮动元素将它们从页面的正常块定位中取出,因此右侧浮动的元素会突破父容器,从而折叠div.您可以清除它们,或者更简洁明智的方法是将’overflow：auto’添加到父容器中：

#actions{    background: blue; overflow: auto;}#buttons{    float: left;    overflow: hIDden;}#text {    float: right;    overflow: hIDden;}

由于“overflow：auto”可以在某些情况下生成滚动条,因此我通常通过在children元素上指定’overflow：hIDden’来明确地阻止它.这在我的经验中可靠地工作.

总结

以上是内存溢出为你收集整理的html – 使用float [div]时Div崩溃全部内容，希望文章能够帮你解决html – 使用float [div]时Div崩溃所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1107315.html

html – 使用float [div]时Div崩溃

发表评论

评论列表（0条）