子Div使用Float后如何撑开父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会影响元素的遍历。
子Div使用Float后如何撑开父Div的更多相关文章
- 子div设置float后会导致父div无法自动撑开
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...
- 子div设置float后导致父div无法自动撑开的问题
子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...
- html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)
浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...
- css 父div如何包裹带有float属性的子div,float子div如何撑开父div
来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
- 子元素绝对定位absolute后,自动撑开宽度
position: absolute; white-space: nowrap;
- 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 ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
- css中子元素浮动,无法自动撑开父元素的解决办法
<div> <div style="float:left;">left</div> <div style="float:righ ...
- 父div高度和宽度的应用
这是我自己在仿腾讯首页时遇到的布局问题,在此记录,如果有错,欢迎指正. 首先是对齐问题,可以把父div的高度设置为0,然后调整padding值,这样可以批量调整子div们和其他父div的相对高度. 这 ...
随机推荐
- dotNET使用DRPC远程调用运行在Storm上的Topology
Distributed RPC(DRPC)是Storm构建在Thrift协议上的RPC的实现,DRPC使得你可以通过多种语言远程的使用Storm集群的计算能力.DRPC并非Storm的基础特性,但它确 ...
- CCommandManager 类
CCommandManager类 CCommandManager 类管理命令及其与图像的关联.描述CCommandManager :: CleanUp从命令列表和全局和用户映射中删除所有元素.CCom ...
- getaddrinfo
gethostbyname和gethostbyaddr这两个函数仅仅支持IPv4,getaddrinfo函数能够处理名字到地址以及服务到端口这两 种转换,返回的是一个sockaddr结构的链表而不是一 ...
- 工作中常用的Linux命令:ipcs/ipcrm命令
本文链接:http://www.cnblogs.com/MartinChentf/p/6057100.html (转载请注明出处) ipcs 1. 命令格式 ipcs [resource-option ...
- stm32之NVIC
非本人原创,转载自http://blog.csdn.net/denghuanhuandeng/article/details/8350392 STM32的NVIC理解 例程: /* Configur ...
- [转]六款值得推荐的android(安卓)开源框架简介
本文转自:http://www.jb51.net/article/51052.htm .volley 项目地址 https://github.com/smanikandan14/Volley-demo ...
- JavaSE之概述与基本语法
嘛,这个本来应该发在OOP之前的,无所谓了,补发一下,这篇文章只会对JavaSE的语法做一个基本的概述而已,我会在最近新开一个新坑,也就是JavaEE系列,以后还会有Cpp(相对于C++,我还是更喜欢 ...
- Flappy Bird (Java实现)
运行效果: 代码: package bird; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; im ...
- nginx集群报错“upstream”directive is not allow here 错误
nginx集群报错“upstream”directive is not allow here 错误 搭建了一个服务器, 采用的是nginx + apache(多个) + php + mysql(两个) ...
- Eclipse linux tools 插件
!. eclipse linux tools. http://www.eclipse.org/linuxtools/projectPages/libhover/ 2. install new soft ...