子元素使用float 父元素撑开方法
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图:
部分代码如下:
1 <style>
2 #div1{border:1px solid red;float:left;}
3 #div2,#div3{float:right;border:1px solid blue;}
4 </style>
5
6 <div id="div1">
7 <div id="div2">two</div>
8 <div id="div3">one</div>
9 </div>
如果想要撑开父元素可以采用以下方法:
方法一:
父元素设置overflow以及zoom,样式如下:
1 <style>
2 #div1{border:1px solid red;overflow:hidden;zoom:1;}
3 #div2,#div3{float:right;border:1px solid blue;}
4 </style>
方法二:
父元素也是设置浮动效果,样式如下:
1 <style>
2 #div1{border:1px solid red;float:left;}
3 #div2,#div3{float:right;border:1px solid blue;}
4 </style>
此方法有个缺陷是,父元素的宽度需要设置。
方法三:
在添加一个子元素,并设置clear样式:
1 <div id="div1">
2 <div id="div2">two</div>
3 <div id="div3">one</div>
4 <div style="clear:both"></div>
5 </div>
此方法添加了一个div元素,有些情况下可能这个div会影响元素的遍历。
以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 下测试通过,其他浏览器没有测试。
子元素使用float 父元素撑开方法的更多相关文章
- 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- 使用flex防止fit-content子元素冲出父元素宽度的方法
父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- 子元素z-index高于父元素兄弟元素z-index被遮挡问题
问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...
- 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...
- js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
- 三列布局中 float引发的一个问题-当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。
样式: 效果是这样的: 解答:我们发现:靠右的元素自动换行了,原因是:当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥. 解决方法: ...
- ie6下子元素撑大父元素
今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...
随机推荐
- div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...
- android SQLite数据库总结
SQLite SQLite是一种超轻量级的嵌入式数据库,大小只有几百KB,但是其语法支持标准SQL语法,同时还遵循了数据库的ACID事务,所以学过其他数据库的开发人员都很容易掌握其使用. sql语法就 ...
- iOS---The maximum number of apps for free development profiles has been reached.
真机调试免费App ID出现的问题The maximum number of apps for free development profiles has been reached.免费应用程序调试最 ...
- Foundation框架下的常用类:NSNumber、NSDate、NSCalendar、NSDateFormatter、NSNull、NSKeyedArchiver
========================== Foundation框架下的常用类 ========================== 一.[NSNumber] [注]像int.float.c ...
- HTML---用记事本写html
<DOCTYPE HTML> <--DOCTYPE 文档类型,浏览器按照该类型解析--> <html> <head> <title>这个是h ...
- Oracle学习笔记一 初识Oracle
数据库简介 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.SQL 是 Structured Query Language(结构化查询语言)的首字母缩写词. 定义 数据库,简单来 ...
- android socket 线程连接openwrt与arduino单片机串口双向通信
package zcd.netanything; import java.io.BufferedReader; import java.io.InputStreamReader; import jav ...
- js 页面无滚动条添加滚轮事件
当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...
- 《Note --- Unreal 4 --- matinee》
https://docs.unrealengine.com/latest/CHN/Engine/Matinee/index.html https://docs.unrealengine.com/lat ...
- 【js】初入AJAX
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...