在最后一个div 后面加上 overflow:hidden;如下:

<div style="width:580px; height:auto; margin:0 auto;
<div style="height:100px; width:230px; float:left; margin:20px"></div>
<div style="height:100px; width:230px; float:left; margin:20px"></div>
<div style="height:100px; width:230px; float:left; margin:20px"></div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>

亲自验证。

大div套多个小div,怎样设置外div的高度自适应?的更多相关文章

  1. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  2. css+div 布局遇到的小常识

    /根目录../上层目录举例如下: 在photo.css文件中写入: div.ls{ background:url(../photo/framels.jpg) no-repeat left; }div. ...

  3. CSS: 解决Div float后,父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  4. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  5. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  6. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  7. div高度自适应

    第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. div高度自适应填充剩余部分

    在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充.但是还不能固定高度,因为屏幕的宽高都不一样...height:100%是不可行的.搜了一圈, ...

  9. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

随机推荐

  1. css 三角形空心三角形的简单实现

    <style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px ...

  2. robotframe添加自定义lib 报Importing test library ‘xxxx’ failed

    问题现象:在linux服务器上搭建jenkins 执行robot工程时报:Importing test library  ‘xxxx’   failed 问题分析一: 在library  引入非rob ...

  3. php的微信公众平台开发接口类

    <?php define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest(); if ...

  4. 总结一下NDK crash排查步骤

    总结一下NDK crash排查步骤: 先在PC上跑通算法 用Visual Studio写算法的testbed,确保算法能跑通 抓log adb logcat -c; adb logcat > 1 ...

  5. Linux CentOs下安装lnmp

    1.下载源码包 以root目录为例: cd ~ # 下载安装包 wget http://nginx.org/download/nginx-1.17.2.tar.gz # nginx wget http ...

  6. OpenStack核心组件-cinder存储服务

    1. cinder 介绍 Block Storage 操作系统获得存储空间的方式一般有两种: 1)     通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文 ...

  7. 编译heartbeat出现的问题

    如报 cc1: warnings being treated as errors pils.c:245: error: initialization fromincompatible pointer ...

  8. Kotlin协程作用域与Job详解

    Job详解: 在上一次https://www.cnblogs.com/webor2006/p/11725866.html中抛出了一个问题: 所以咱们将delay去掉,需要改造一下,先把主线程的dela ...

  9. collections.defaultdict()

    https://www.cnblogs.com/herbert/archive/2013/01/09/2852843.html >>> import collections > ...

  10. learning scala list.collect

    collect will apply a partial function to all elements of a Traversable and return a different collec ...