<!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横向三栏布局的更多相关文章

  1. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  2. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  4. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  5. 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  6. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  7. 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

  8. css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

    解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

  9. 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

随机推荐

  1. Java基础之扩展GUI——使用对话框创建文本元素（Sketcher 4 creating text elements）

    控制台程序. 为了与Sketcher中的其他元素类型保持一致,需要为Elements菜单添加Text菜单项和工具栏按钮.还需要定义用来表示文本元素的类Element.Text. 1.修改Sketche ...

  2. DNS消息格式

    一,简介 空谈误国,要让一大堆抽象的DNS概念落地,还是需要了解DNS消息格式的,本文会尽量详细地介绍DNS消息格式的每一个字段. 也可以移步rfc1035了解. 二,概览 DNS消息主要由五部分组成 ...

  3. 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本

    <zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本      人脸识别.车牌识别是opencv当中 ...

  4. SQL优化大全

    1. 优化SQL步骤 1. 通过 show status和应用特点了解各种 SQL的执行频率 通过 SHOW STATUS 可以提供服务器状态信息,也可以使用 mysqladmin extende d ...

  5. c#委托、事件、Observer

    委托和事件在.NET Framework[1] 中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易. 中文名 委托 外文名 Delegate 编程语言 C# 作     ...

  6. jenkins+gerrit

    Verified 功能 http://www.cnblogs.com/zhanchenjin/p/5032218.html

  7. Java虚拟机学习（5）：类加载器(ClassLoader

    类加载器 类加载器(ClassLoader)用来加载 class字节码到 Java 虚拟机中.一般来说,Java 虚拟机使用 Java 类的方式如下:Java 源文件在经过 Javac之后就被转换成 ...

  8. android中ContentProvider获取联系人 总结

    35.内容提供者:ContentResolver 用内容提供者来获取联系人信息 35-1:权限 <!-- 对联系人的读.写权限 --> <uses-permission androi ...

  9. google 提供webrtc 的实例使用 turnserver的方式

    google的turnserver 下载方式:svn checkout http://rfc5766-turn-server.googlecode.com/svn/branches/v3.2/ rfc ...

  10. Script 简单语句的练习题

    猜拳 <body>请输入剪刀或者石头或者布:<br /><input type="text" id="A"/><inp ...