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浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
随机推荐
- Java生成和操作Excel文件
JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...
- JDBC增删改查，PreparedStatement和Statement的区别
此篇是在上一篇的基础上使用PreparedStatement对象来实现JDBC增删改查的 具体工具类JDBCTools和实现类和配置文件在上一篇Statement对象实现的时候有写. 上一篇地址htt ...
- 厦门BRT 硬币型非接触式IC卡分析
前几天去厦门玩顺便多买了一张BRT的票 也就是如图所示的这种硬币型非接触式IC卡 回来之后用Proxmark3分析了卡内数据得到如下16进制dump内容 UID.发卡日期时间. 最近好懒 懒得写了 有 ...
- Groovy学习笔记（一）
1.1 安装Groovy Groovy主页:http://www.groovy-lang.org 确保本地系统安装了Java 1.1.1 在Windows系统上安装Groovy 1.创建环境变量GRO ...
- C# 刷新页面浏览次数（点击量）+1
页面视图: <p class="text-center text-muted">文章来源:@ent.Origin 点击量:@ent.Hits <Script La ...
- AJAX-----10iframe模拟ajax文件上传效果原理2
在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> &l ...
- js 父窗体
1.关闭 父窗体 window.opener.opener=null;window.opener.close() 2.刷新父窗体 JS刷新父窗口的几种方式 浮层内嵌iframe及frame集合窗 ...
- POJ - 3652 Persistent Bits
“模拟”类型,题型容易,使用bitset库对二进制逐位操作,初始化.十进制转二进制(unsigned int).位操作. POJ - 3652 Persistent Bits Time Limit: ...
- POJ - 1107 W's Cipher
POJ - 1107 W's Cipher Time Limit: 1000MS Memory Limit: 10000KB 64bit IO Format: %I64d & %I64u De ...
- python : HTML+CSS (定时器轮寻)
定时器轮寻 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...