H5横向三栏布局

<!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>