关于浮动元素的经典考题

最新推荐文章于 2022-07-08 09:46:43 发布

鬼眼邪神

最新推荐文章于 2022-07-08 09:46:43 发布

阅读量520

点赞数

分类专栏： CSS 文章标签： css 浮动元素

本文链接：https://blog.csdn.net/u010200222/article/details/45622617

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

请看下面代码：

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

如何在不改变上述代码、不使用绝对定位和相对定位的情况下，实现如下效果图：

答案如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>HTML5</title>
		<style>
			* {margin:0;padding:0;}
			.one {
				width:200px;
				height:200px;
				background:red;
				float:left;
			}
			.two {
				background:blue;
				clear:left;
				float:left;
				width:200px;
				height:200px;
				margin-top:10px;
			}
			.three {
				width:200px;
				height:410px;
				background:green;
				margin-left:210px;
				_margin-left:207px;
			}
		</style>
	</head>

	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

第一个div左浮动，第二个div先清浮动再左浮动。由于在IE6中浮动元素和非浮动元素在同一行时会增加3px的间距，这个时候就要用到hack技术，给第三个div设置CSS声明_margin-left:207px;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鬼眼邪神

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于浮动元素的经典考题

请看下面代码：如何在不改变上述代码、不使用绝对定位和相对定位的情况下，实现如下效果图：答案如下： HTML5 * {margin:0;padding:0;} .one { width:200px; height:200px; background:red; float:left; } .two { background:blue;
复制链接

扫一扫