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>
H5横向三栏布局的更多相关文章
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应
解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...
- 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应
需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
随机推荐
- 将数据文件从asm移到普通文件系统
数据库可以关闭的场景: 1.关闭并重新mount数据库 $ sqlplus '/as sysdba' SQL> shutdown immediate; SQL> startup mount ...
- Scala 流程空间，函数，异常处理
1,)首先留意一下下边的代码块,他是怎么运行的,貌似在c#中他是出错的,不应该出现这样的写法的,但在scala中侧不然: package com.dt.study /** * The package ...
- qunit学习（一）
QUnit是一个强大的JavaScript单元测试框架,用于调试代码.该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.任意正规JavaScript代码QUnit都能测试. 其 ...
- （九）串行口方式0 拓展并行输入端口 74LS165 芯片
74LS165芯片讲解: 外接一个同步移位寄存器 74LS165芯片,拓展一个 8 位 并行输入端口的电路, 可将接在74LS165芯片的8个开关 S0——S7 的状态 通过 串行口方式 0 读到 单 ...
- [CrunchBang]修改win+ubuntu 双 系统菜单的 启动顺序 引导
说到启动就不得不说GRUB,Linux下大名鼎鼎的启动管理工具(曾经的LILO已经风光不再),当然现在已经是GRUB2了,GRUB2和GRUB最重要的区别就是,GRUB存放系统启动信息的文件为/boo ...
- 解决ADB端口占用问题
方式一5037为adb默认端口,若5037端口被占用,查看占用端口的进程PIDC:\Users\wwx229495>netstat -aon|findstr 5037 TCP 127. ...
- 【转】Struts1.x系列教程（4）：标签库概述与安装
转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...
- 图论$\cdot$强连通分量
和无向图的连通分量类似,有向图有“强连通分量”的说法.“相互可达”的关系在有向图中也是等价关系.每一个集合称为有向图的一个强连通分量(scc).如果把一个集合看成一个点,那么所有的scc构成了一个sc ...
- sql注入过滤的公共方法
/// <summary> ///SQL注入过滤 /// </summary> /// <param name="InText">要过滤的字符串 ...
- python字符串加颜色区别
1.有时需要显目的区别不同内容,可以改变显目的内容颜色 print("\033[31;1m你好麽,\033[0m我很好..")print("\033[32;1m你好麽,\ ...