JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

<div class="outer"> <!-- 父容器 -->
	<div class="inner"> <!-- 子容器 -->
		... <!-- 子容器内部内容 -->
	</div>
    <i>&nbsp;</i>
</div>

CSS

.outer { background: #60b99a; 
    line-height: 100px; height: 100px; font-size:0;
    white-space:nowrap;  /*prevent from breaking line */ }
.inner { background: #f1efa5;
    display: inline-block; *display:inline; *zoom: 1; vertical-align:middle; /*inline-block hack*/
    height: 70%; width: 80%;
    line-height: normal; font-size: 16px; /*resets*/ }
.outer i { font-size: 0; display:inline-block; height:100%; width: 0; }