div设置为显示的问题：table-cell; [英] Issue with div set to display: table-cell;
本文介绍了div设置为显示的问题：table-cell;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< style>
* {margin：0; padding：0; outline：0; border：0;}
aside {background：red; width：40％; display：table-cell;}
。两个{width：40％; background：blue; display：table-cell;}
.one {width：30％; background：green; display：table-cell;}
#wrapper {display：表格;宽度：100％;}
< / style>
< / head>
< body>
< div id =wrapper>
<预计>
< div style =height：100px; width：100px; border：2px solid orange;>
< / div><！ - / - >
< / aside>
< section class =two>
Text
< / section>
< section class =one>
Text
< / section>
< / div>
< / body>
< / html>
以下是代码的JSFiddle： http://jsfiddle.net/jtmkrueger/Aza47/
如何获取内容细胞总是在这种情况下被称为顶端？请注意，第二个和第三个框中的文本被推下...
解决方案
使用 vertical-align：top; style。
请参阅更新了jsfiddle 。
<!DOCTYPE html>
<html>
<head>
<style>
* {margin:0;padding:0;outline:0;border:0;}
aside {background:red;width:40%;display:table-cell;}
.two {width:40%;background:blue;display:table-cell;}
.one {width:30%;background:green;display:table-cell;}
#wrapper {display:table;width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<aside>
<div style="height: 100px; width: 100px; border: 2px solid orange;">
</div><!-- / -->
</aside>
<section class="two">
Text
</section>
<section class="one">
Text
</section>
</div>
</body>
</html>
Here is a JSFiddle of the code: http://jsfiddle.net/jtmkrueger/Aza47/
How can I get the content in the cells to always be valigned to the top in this situation? Notice that 'text' in the second and third boxes is pushed down...
解决方案
Use a vertical-align: top; style.
See the updated jsfiddle.
这篇关于div设置为显示的问题：table-cell;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
