div float

<html>
<head>
</head>
<body>
<div style="width:200px; overflow:hidden;">
	<div style="float:left; width:100px; height:100px; background:#f00;">
	</div>
	<div style="float:left; width:100px; height:50px; background:#0f0;">
	</div>
	<div style="float:left; width:100px; height:50px; background:#00f;">
	</div>
</div>
</body>
</html>

右侧放不下连才会往下放：

时间： 2024-10-03 14:46:21

div float的相关文章

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

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

css div float属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css 父div如何包裹带有float属性的子div,float子div如何撑开父div

来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px solid blue;} </style> <div id="div1"> <div id="div2">two</div> <div id="div3">one</div>

(转)如何修正DIV float之后导致的外部容器不能撑开的问题

本文转载自:http://blog.csdn.net/qsdnet/article/details/1534005 在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.看下面的例子: HTML4STRICT代码: <div style="width:200px;border:1px solid red;"> <div sty

Div float定位

规则1: div是块元素,不分大小,独占一行 规则2: div  添加样式 float 后,脱离标准流,浮在标准流之上 规则3: 清除浮动,仅对设置clear的div 本身有效 语法: clear : none | left | right | both 取值: none  :  默认值.允许两边都可以有浮动对象 left   :  不允许左边有浮动对象 right  :  不允许右边有浮动对象 both  :  不允许有浮动对象 原文地址:https://www.cnblogs.com/hua

常用布局，div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

CSS篇之DIV+CSS布局

<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

如何让两个div处于一行

我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的 例如: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>让两个div处于同一行</title> </head> <body> <div style="height: 40px;w

用循环将三个DIV变成红色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-