等高佈局display：table

時間 2019-11-30

標籤等高佈局 display table 欄目 CSS 简体版

原文原文鏈接

display：table用法：css

父元素：display:table;html

子元素：display：table-cell;jsp

注：使用display:table-cell元素部分出現空白縫隙的問題：設置 .cell{line-height: 0;}spa

示例：code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <style type="text/css">
            .box{width: 100%;}
            .row{
                display: table;
                width: 100%;
            }
            .cell{
                display: table-cell;
                width: 50%;
                background: #FFFAE8;
                vertical-align: middle;
                 text-align: center; line-height: 0;
            }
            .cell:nth-child(2n){
                background: lavender;
            }
            p{margin-bottom: 30px;}
            img{width: 100%;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="row">
                <div class="cell">
                    <img src="img/1.jpg"/>
                </div>
                <div class="cell">
                    <p>dsjoligjsp</p>
                    <p>dsjoligjsp</p>
                    <p>dsjoligjsp</p>
                </div>
            </div>
        </div>
            
    </body>
</html>

相關標籤/搜索