让里面的div撑开外面的div,让高度自适应

<!-- 设置clearfloat样式,让里面的div撑开外面的div,让高度自适应 -->
<style type="text/css">
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
</head>

<div class="choose-bg-box">
<c:forEach items="${focusAreasList }" var="list" varStatus="count">
<div class="choose-box" style="float:left;">
<div class="choose-box-item" id="${list.dictionaryId }" name="focusArea"> ${list.dictionaryName}</div>
</div>
</c:forEach>
<div class="clearfloat"></div>
</div>

在浮动的容器后面,父容器结束之前加入一个div,代码如下:
<div class="fuqin">
  <ul>
    <li>内容1</li>
    <li>内容1</>
  </ul>
  <div class="clearfloat"></div>
</div>
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

原文地址:https://www.cnblogs.com/konglxblog/p/10012085.html

时间: 2024-10-11 00:02:48

让里面的div撑开外面的div,让高度自适应的相关文章

里面的div怎么撑开外面的div让高度自适应

参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人群中的大部分也没有单独升级浏览器的习惯,于是乎ie6依旧是使用最多的浏览器版本.根据本站流量的统计,来自ie6的访问比重为72.6%.表明了以上的观点,虽然最高的时候,ie6占了90%以上. 言归正传,div+css作为网页的布局已经是大势所趋.它的优点不在这里啰嗦.但最近经常有朋友提到关于容器高度

【css基础】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题的根源就是清除浮动: 1 , 给父节点增加样式overflow:hidden或者overflow:auto 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div

js实现的点击div区域外隐藏div区域(转)

首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1.stopPropagation()对于非IE浏览器. 2.cancelBubble属性为true,对于IE浏览器,而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head&g

jQuery实现鼠标点击Div区域外隐藏Div

摘录自:http://www.crackedzone.com/jquery-click-div-outside-hide-div.html jQuery本身没有这样一个事件,要实现这个效果,我们首先要先了解javascript中的事件冒泡. 冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络) 1. 阻止事件冒泡, 并不阻止事件行为:event.s

外面的wifi非常精彩,外面的wifi非常不安

星期一果然非常忙,看到安卓漏洞还是午休的时候.可能我们都习惯了.我们的信息安全一向难以得到保障.对于我来说,可能都无所谓了.可是作为用户之中的一个,我们也不能太安分,该须要的保障还是得维护. 本来.我们就知道wifi向来不是件安全的事儿,更不用说使用外面的wifi.关于wifi上网的负面新闻不断曝出,如今给我的感觉就是,假设我们在在一个环境下wifi上网,那么那块空气重无处不充斥着我们的隐私信息.给人一种窒息和被人肉的错觉. 这样想来,我都更不愿在外wifi了,还是在家使用无线网或者直接宽带也行

外面的wifi很精彩,外面的wifi很不安

星期一果然很忙,看到安卓漏洞还是午休的时候,可能我们都习惯了,我们的信息安全一向难以得到保障.对于我来说,可能都无所谓了.但是作为用户之一,我们也不能太安分,该需要的保障还是得维护. 本来,我们就知道wifi向来不是件安全的事儿,更不用说使用外面的wifi.关于wifi上网的负面新闻不断曝出,现在给我的感觉就是,如果我们在在一个环境下wifi上网,那么那块空气重无处不充斥着我们的隐私信息,给人一种窒息和被人肉的错觉. 这样想来,我都更不愿在外wifi了,还是在家使用无线网或者直接宽带也行. 可是

浮动子div撑开父div的几种方法、给select赋值、zoom样式的含义、实现select下拉框readonly

1.浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动 (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素float:left:,这样设置的坏处是不能用margin:auto:实现居中 (4)设置父元素display:inline-block;,这样设置的坏处是不能

浮动以后父DIV包不住子DIV解决方案

转载自http://blog.sina.com.cn/s/blog_6c363acf0100v4cz.html 当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题. 先来看看这个问题的实际效果 这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果

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

在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整.要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法: 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签.我个人比较喜欢这种方法,因为它简单.实用.浏览器兼容性好,而且这种方法也是W3C推荐的方法 <div