码迷,mamicode.com
首页 > 其他好文 > 详细

H5横向三栏布局

时间:2016-05-10 12:51:17      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

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

H5横向三栏布局

标签:

原文地址:http://www.cnblogs.com/xiaoleidiv/p/5477136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!