有关一个CSS的简单问题!

来源：百度知道 编辑：UC知道 时间：2024/05/14 09:14:20
像下面的代码是两行两列组成的方块，有没有方法将第一个方块和第三或者第四个方块调换位置？

<div style="width:400px;height:400px; background-color:red; float:left;">第一个BOX</div>
<div style="width:400px;height:400px; background-color:blue;">第二个BOX</div>
<div style="width:400px;height:400px; background-color:black; float:left;">第三个BOX</div>
<div style="width:400px;height:400px; background-color:green;">第四个BOX</div>

顺便再问一下，用CSS还有别的方法实现上面的效果吗？（两行两列的方块）

本人对CSS定位这个问题很迷茫！初级阶段！很像学好它，非常感谢你的回答！

天纳~ 你从哪里看的教程？代码太不规范了，告诉你没有设计师会这样写代码的。(在特殊情况下，会用到上面你贴的代码)

我给你手写的代码 你看看，研究研究吧，很简单的。(兼容firefox和IE)

<style type="text/css">
*{font-size:12px;text-align:center;}
#body {height: 400px;width: 400px;}
#box1 {background-color: #D2FFEE;float: left;height: 200px;width: 200px;}
#box2 {background-color: #FEFEE2;float: left;height: 200px;width: 200px;}
#box3 {background-color: #FEE2E2;float: left;height: 200px;width: 200px;}
#box4 {background-color: #CBEBFC;float: left;height: 200px;width: 200px;}
</style>
<div id="body">
<div id="box1">第一个</div>
<div id="box2">第二个</div>
<div id="box3">第三个</div>
<div id="box4">第四个</div>
</div>

他的组成是顺序排列，float:left指定构成，左边第一方块，右边第二方块；这一组构成一行；下面相似。

要交换很简单阿，你要第一个是黑的，就在backgroud-color后面使用black数值就好。

不用float方法，可以直接指定绝对位置拼凑