div的float让div脱离了文档流,这就造成了一个问题,float的div的高度,宽度不能撑起父div,这个问题的解决办法:
第一:设置父div的属性:overflow:hidden;zoom:1;
#parent{border:1px solid red;overflow:hidden;zoom:1;}
#children,#div3{float:right;border:1px solid blue;}
第二:父元素也是设置浮动效果
#parent{border:1px solid red;float:left;}
#children,#div3{float:right;border:1px solid blue;}
第三:在添加一个子元素,并设置clear样式:
<div id="div1">
<div id="div2">two</div>
<div id="div3">one</div>
<div style="clear:both"></div>
</div>
使用第一种方法的实例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<style type="text/css">
.mydiv{
float:left;
width:130px;
height:160px;
background:red;
margin-left:40px;
margin-top:15px;
margin-bottom:15px;
}
.myspan{
margin-left:20px;
}
</style>
</head>
<body>
<div style="width:90%;margin:0px auto;">
<div>匹配情况</div>
<div style="margin-top:5px;">
<span style="margin-left:15px;">巡维中心:</span>
<span style="margin-left:5px;">
<span class="myspan" style="margin-left:0px;">深圳</span>
<span class="myspan">龙华</span>
<span class="myspan">深圳</span>
<span class="myspan">龙华</span>
<span class="myspan">深圳</span>
<span class="myspan">龙华</span>
</span>
<span style="float:right">切换按钮</span>
</div>
<div style="border:1px solid black;overflow:hidden;zoom:1;margin:0 auto;">
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
<div class="mydiv" style="clear:both">56565</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
DIV+CSS布局:CSS浮动float属性详解 不解释
看了高洛峰老师的div+css视频教程,不错。 模仿里面的实例,写了个简单的页面,float布局,在手机上显示也可以。 比较简单的演示,对布局有了更多的了解
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
相关文章:https://www.jb51.net/css/divcss-4952.html ...额外标签法这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就
<style type="text/css"> body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px...
DIVCSS布局:CSS浮动float属性详解
许多应征前端工程师的人,在面试时都会被问到这类float的问题。例如:div元素内的两个子元素p都float:left,外面的div会变成没有高度,此时该怎么办呢?通常解法是在排版流里面的元素加一个after的伪元素,将它设成...
HTML - DIV+CSS 课件,DIV标签介绍 CSS基础 MARGIN,PADDING介绍 BORDER介绍 FLOAT介绍 综合练习
内嵌方式就是将CSS代码写... 全国的CSS爱好者汇聚于此,如果不来,你就OUT喽!我们的口号是: “分享自己的欢乐与痛苦,分享自己的经验与心得,分享自己的资料与资源” 如果您也愿意,就加入我们吧! </html>
复制代码代码如下: <... <head> <style type=”text/css”> div#row1 { float: left;... <div id=”row1″>第一个div</div> <div id=”row2″>第二个div不换行</div> </body> </html>
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width...
具体详细的阐述了css浮动如何解决和浮动产生的原因。
实现div+css的整体布局的实例,可以更好地理解这种布局,其中关于float用的比较多,还有div居中处理
<style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 240px; margin: 0 auto; border-...