大佬教程收集整理的这篇文章主要介绍了css – 这个HTML5砖怎么会掉下来？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
概念证明：http://jsfiddle.net/GADk9/
示例中的复选框只是在砖内切换文本,没有更多.我不知道上面的边距(来自哪里)来自哪里.
这是一个完整的HTML5文档：
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>HTML5 falling Brick - what is this?</title> <style> #brick { BACkground-color: lightgray; border: solid black medium; border-radius: 1em; color: red; font-size: 2em; height: 100%; text-align: center; } #conTrail { BACkground-color: lightblue; width: 20em; } #pit { display: table; } #pit>* { display: table-cell; } #pit>*>* { height: 4em; } </style> </head> <body> <div> <label>Click me twice <input onchange="document.getElementById('brick').innerHTML = this.checked ? 'falL!!!' : ''" type='checkbox'></input> </label> </div> <div id='pit'> <div> <div> </div> </div> <div id='conTrail'> <div> <div id='brick'></div> </div> </div> </div> </body> </html>
更新
再次阅读我的问题后,@R_874_10509@可能会提示不正确的印象,即我正在试图完成的是修复一些HTMl.
要明确地强调这一点,我不需要在这里改变任何东西.砖的例子只是一个有趣的演示我正在观察的问题.
当一个内容插入这样一个安排的时候,我真的有兴趣了解什么是导致元素改变他们的位置.
<div class="cell left"> <div class="inner"></div> </div> <div class="cell middle"> <div class="inner"></div> </div> <div class="cell right"> <div class="inner"></div> </div>
然后给这个div分配一个不同的高度和一些CSs.
.cell { display:table-cell; BACkground-color:black; width:200px; } .inner { BACkground-color:silver; } .left .inner { height:80px; } .middle .inner { height:140px; } .right .inner { height:100px; }
默认情况下,这些内部div与其基线垂直对齐.所以,没有任何文本,所有的div都沿着单元格的底部对齐：
+------+
| |
| +------+
+------+ | |
| | | |
| | | |
+------+------+------+
但是,如果您向其中任何一个添加文本,则该div将被按下,以使第一行文本的基线与其他div的底部边线对齐.
+------+
| |
| |
+------+ |
| | +------+
| | |Text |
+------+------+ |
| |
+------+
如其他人所指出的,您可以通过设置不同的vertical-align属性来更改发生的情况.例如,添加vertical-align：top到.cell选择器会给你这样的东西：
+------+------+------+
| | |Text |
| | | |
+------+ | |
| +------+
| |
+------+
我觉得最简单的方法是在codepen里玩这种东西,在这里你可以看到这些变化. Here’s an example试验.
以上是大佬教程为你收集整理的css – 这个HTML5砖怎么会掉下来？全部内容，希望文章能够帮你解决css – 这个HTML5砖怎么会掉下来？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。