菜鸟学堂在线工具

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟学堂(edu.jb51.net)</title>
<style>
.box
{
	display:-ms-flexbox;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	width:200px;
	height:100px;
	border:2px solid red;
}
</style>
<script>
function ChangeBoxAlign(x)
{
// Returns the selected option's text
var boxAlign=x.options[x.selectedIndex].text;
var div=document.getElementById("myDiv");
if (div.style.MozBoxAlign!==undefined)
  {
  div.style.MozBoxAlign=boxAlign;
  }
else if (div.style.webkitBoxAlign!==undefined)
  {
  div.style.webkitBoxAlign=boxAlign;
  }
else if (div.style.msFlexAlign!==undefined)
  {
  div.style.msFlexAlign=boxAlign;
  }
else
  {
  alert("Your browser doesn't support this example!");
  }
}
</script>
</head>
<body>
<div class="box" id="myDiv">
<b>first child</b>
<i>second child</i>
</div>
<select onchange="ChangeBoxAlign (this);" size="6">
<option selected="selected" />baseline
<option />center
<option />end
<option />inherit
<option />start
<option />stretch
</select>
<p><b>注意:</b> 这个实例在 Opera,或 Internet Explorer 9以及更早版本的浏览器中不兼容</p>
</body>
</html>

运行结果 在线运行