CSS 参考手册
CSS3 box-align 属性
更改一个元素的box对齐值 - 这个例子演示了如何使用JavaScript来改变一个元素box-align值。
源代码:
点击运行 »
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>
运行结果:
点击运行 »
