HTML
Example 1 <div class="Table"> <!-- similar <table>--> <div class="tr" > <!-- similar <tr>-----> <!-- similar <td> ------> <div class="td alignCenter verticalAlignTop" > text-align:center;<br>vertical-align:top;</div> <div class="td alignCenter verticalAlignMiddle"> text-align:center;<br>vertical-align:middle;</div> <div class="td alignCenter verticalAlignBottom"> text-align:center;<br>vertical-align: bottom;</div> </div> <div class="tr" > <!-- similar <tr>--> <!-- similar <td> ------> <div class="td alignLeft verticalAlignTop"> text-align:left;<br>vertical-align:top;</div> <div class="td alignCenter verticalAlignMiddle" > text-align: center;<br>vertical-align: middle;</div> <div class="td alignRight verticalAlignBottom " > text-align:right ;<br>vertical-align: bottom;</div> </div> </div> <style> .Table {display:table;width: 100%;font-size: 23px;} div {border: 1px solid #f00;} .tr {display:table-row;height: 200px; } .td {display:table-cell;width:33%;} .alignCenter {text-align:center;} .alignLeft {text-align:left;} .alignRight {text-align:right;} .verticalAlignTop {vertical-align:top;} .verticalAlignMiddle {vertical-align:middle;} .verticalAlignBottom {vertical-align:bottom;} </style>
<div style="display:table;width:90%;padding:30px" > <div style="display:table-cell;width: 33% ; border: 1px solid #f00;" > inner Div CSS<br> display:table-cell<br>width: 33%</div> <div style="display:table-cell;width: 33% ; border: 1px solid #f00;" > inner Div CSS<br> display:table-cell<br>width: 33%</div> <div style="display:table-cell;width: 33% ; border: 1px solid #f00;" > inner Div CSS<br> display:table-cell<br>width: 33%</div> </div> <span style="position:relative ;background:gold; top:-270px ; left:20px;"> outer Div CSS display:table ; width:90%</span> <style> div{border: 1px solid #f00;height: 200px;} </style>
沒有留言:
張貼留言