x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
#main {8
width: 400px;9
height: 150px;10
border: 1px solid #000000;11
display: flex;12
}13
14
#main div {15
width: 70px;16
height: 70px;17
}18
</style>19
</head>20
<body>21
22
<div id="main">23
<div style="background-color:coral;" id="myRedDIV"></div>24
<div style="background-color:lightblue;" id="myBlueDIV"></div>25
<div style="background-color:lightgreen;" id="myGreenDIV"></div>26
<div style="background-color:pink;" id="myPinkDIV"></div>27
</div>28
<p>点击“尝试一下”按钮，改变四个 DIV 的顺序：</p>29
<button onclick="myFunction()">尝试一下</button>30
<script>31
function myFunction() {32
document.getElementById("myRedDIV").style.order = "4";33
document.getElementById("myBlueDIV").style.order = "3";34
document.getElementById("myGreenDIV").style.order = "1";35
document.getElementById("myPinkDIV").style.order = "2";36
}37
</script>38
<p><b>注意：</b>Internet Explorer 和 Safari 不支持 order 属性。</p>39
40
</body>41
</html>