H5横向三栏布局 - xiaoleilei

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5横向三栏布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <style>
        body {
            background-color: #80ff80;
            padding: 0;
            margin: 0;
        }
        .child {
            display: table-cell;
            vertical-align: middle;
            word-wrap: break-word;
            word-break: break-all;
            white-space: nowrap;
        }

        .container {
            padding: 10px 15px;
            display: block;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }

        .middle {
            width: 10000px;
            text-align: center;
        }

    </style>
</head>
<body>
    <article>
        <div class="container">
            <div class="child">icon</div>
            <div class="child  middle">
                <p>标题文字</p>
            </div>
            <div class="child">
                <p>
                    说明文字
                </p>

            </div>
        </div>

    </article>

</body>
</html>

posted on 2016-05-10 11:18 xiaoleilei 阅读(1199) 评论(0) 收藏举报

刷新页面返回顶部