<!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. emoji探寻之路

    emoji是什么? http://www.baike.com/wiki/emoji emoji表情符号,是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建的,词义来 ...

  2. css3渐变色彩

    CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial).由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资 ...

  3. 20145320 《Java程序设计》第2周学习总结

    20145320 <Java程序设计>第2周学习总结 教材学习内容总结 3.1 类型.变量与运算符 基本类型 整数(short.int.long) .字节(byte) .浮点数(float ...

  4. System.arraycopy

    ref : http://blog.csdn.net/jaycee110905/article/details/45228249

  5. 20. 星际争霸之php设计模式--适配器模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  6. H2.64的远程回放--开篇

    之前有2周一直在研究H.264的远程回放, 不是本机播放哦. 实现的步骤: 1. 先保证解码H.264 2. H2.64文件的解析, 当然是为了回放的速度 3. H.264帧的传输,  我用的是TCP ...

  7. LINQ to SQL Count/Sum/Min/Max/Avg Join

    public class Linq { MXSICEDataContext Db = new MXSICEDataContext(); // LINQ to SQL // Count/Sum/Min/ ...

  8. Java多线程之Lock的使用

    import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...

  9. JFrame中setDefaultCloseOperation的参数含义

    实例1:一个空的java窗口 // JFrameDemo1.java import javax.swing.*;     //使用Swing类,必须引入Swing包 public class JFra ...

  10. Unity的旋转-四元数,欧拉角用法简介

    当初弄不明白旋转..居然找不到资料四元数应该用轴角相乘...后来自己摸明白了 通过两种旋转的配合,可以告别世界空间和本地空间矩阵转换了,大大提升效率. 每个轴相乘即可,可以任意轴,无限乘.无万向节锁问 ...