一个有趣的关于HTML定位的有关问题实现一个左2个div右一个div布局，不过要求多种实现方式-HTML教程-爱易网页

一个有趣的关于HTML定位的有关问题实现一个左2个div右一个div布局，不过要求多种实现方式

日期：2014-05-16　浏览次数：20904 次

一个有趣的关于HTML定位的问题实现一个左2个div右一个div布局，不过要求多种实现方式。

<!--如果下面1/2/3的出现顺序打乱 是否还能做出相同的效果呢？-->

<html>

<head>

<style type="text/css">

div{ background:#ccc}

.no1,.no2{ width:100px; height:100px; float:left;margin:2px; }

.no2{ clear:both}

.no3{ margin-left:110px;width:200px; height:210px }





</style>

</head>



<body>

<div class="no1">1</div>

<div class="no2">2</div>

<div class="no3">3</div>

</body>



</html>

如果下面的div的顺序为 3 2 1或者 2 1 3等等，能否还做出同样的效果呢？

------解决方案--------------------
float 不能，
absolute 可以。
------解决方案--------------------
你都提到了定位，还不知道拿定位来实现吗？

你可以把元素定位到任何你想要的位置，而和你的顺序无关，最大的影响也就是先后顺序会导致层级的高低问题，如果不存在把元素定位在重合地方，也无关紧要。
------解决方案--------------------
单就本例来讲，相对和绝对定位都可以，不同的是绝对定位会让元素脱离文档流