div的【多列】内容舍友float之后,外层div的高度会不受内容控制,可以div所有内容最后加上一个clear,几种方法:

<div id="main">
<div id="content"></div>
</div>

  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。

  我们可以通过三种方法来解决这个问题。
  一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。

<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

  二,增加一个容器,在代码中存在,但在视觉中不可见。

<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>

  三,增加一个BR并设置样式为clear:both。

<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

转载于:https://blog.51cto.com/1183744/610174

div内容设float之后,div的自动高度适应相关推荐

  1. ajax改变div内容,jquery ajax双击div可直接修改div中的内容

    最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: {$ ...

  2. html点击子元素隐藏div,jq 点击div,显示当前div内容,隐藏其他div的子元素

    效果:点击第一行第一张图片时展开第一张图片的字图,隐藏第二行的字图.同时,点击当前图片时能够正常的显示隐藏. 问题:点击当前图片时会隐藏了再显示.有没有好心人能够提示一下应该怎么解决这个bug.非常谢 ...

  3. html div自动居中显示,div居中与div内容居中

    div css结构时,常见到div 居中与div形式居中,即div本身水准居中与div内的形式居中机关. 而形式居中又分为垂直居中与水准居中,这里CSS5将逐个让人人驾御这几个居中机关手段. 关于di ...

  4. html文章整体居中,div居中与div内容居中

    div css构造时,常见到div 居中与div内容居中,即div自身水平居中与div内的形式居中结构. 而模式居中又分为垂直居中与程度居中,这里CSS5将一一让各人把握这几个居中构造本事. 对付di ...

  5. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto 上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div ...

  6. div居中和div内容居中

    一.div自身居中: 使用margin:0 auto 上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致di ...

  7. html div 纵向居中,内容居中分为div内容水平居中与div内容垂直居中

    div内的模式居中: 形式居等分为div内容水平居中与div形式垂直居中. div形式水准居中相比结构div居中,而div模式居中相比简单,只紧要设置装备摆设一个形式居中css(text-align: ...

  8. div内容居中(div块内容居中)

    如何让div内容居中? 让div文字居中如果要让DIV中的文字居中,就得用到文字对齐方式代码text-align:center,这个居中默认为水平居中,详细代码写法如下:div { border:1p ...

  9. php div 居中代码,Div内容居中效果如何实现

    本篇文章主要给大家介绍div内容居中也就是div内容上下左右都居中的效果方法. 对于div内容居中的效果,相信大家都非常熟悉了,比如我们常见的网站导航栏部分.那么在之前的文章中就给大家介绍过div水平 ...

最新文章

  1. Linux内核源代码分析——fork()原理多进程网络模型
  2. RecyclerView+CardView
  3. java掉单_【Java】抄答案就是了,两套详细的设计方案,解决头疼的支付掉单问题...
  4. c++ file* 句柄泄漏_C++核心指南:P.8 勿泄漏任务资源
  5. 最新java初级高级,python基础进阶,机器学习视频资料
  6. [转贴]一个农村高考落榜生的心路历程
  7. win10怎么做文件服务器,win10怎么做云服务器
  8. TSO/GSO/LRO/GRO
  9. 禅定是否一定要打坐,为什么?
  10. 苹果Mac优化清理工具CleanMyMac X2023版本
  11. eclipse jdk版本不一致 build path specifies execution environment j2se-1.5......
  12. 恒玄BES调试笔记-BES2500啸叫howling
  13. 12- 定时器介绍和定时器0定时1ms
  14. 卡尔曼滤波器之经典卡尔曼滤波
  15. 【学习笔记】NOIP爆零赛8
  16. windows10系统提示不允许使用你正在尝试的登录方式,请联系网络管理员了解详细信息
  17. 【CCF会议期刊推荐】中国计算机协会(CCF)推荐计算领域高质量科技期刊分级目录(T2类)
  18. 2.SpringBoot整合Mybatis(一对一)
  19. MUI增加BeeCloud支付集成示例
  20. qiime安装(miniconda)

热门文章

  1. ftl if else判断_07.合意就执行,不行就拉倒-if/else条件控制(一)
  2. 语言运行泰博那契数列_波浪理论的数字基础-斐波那契数列
  3. 动态链接库和静态库的区别
  4. 糗事百科的网络爬虫(v0.2)源码及解析 .
  5. vs配置不依赖其他包路径
  6. OpenCV关于hog特征向量的个数
  7. LinkedList 源码分析(JDK 1.8)
  8. Vue.js 组件 处理边界情况
  9. 图解JVM垃圾回收算法
  10. Java 单例模式探讨