<!

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

>