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浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
随机推荐
- ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件
ajaxForm插件最好选择:jquery forms plugin. 以下为示例: Ajax.BeginForm @using (Ajax.BeginForm("YourAction&qu ...
- Spring 计划
3.0----------------------------------------------------- SCRUM 流程的步骤2: Spring 计划 1. 确保product backlo ...
- UCOS 解读代码
1.OSInit()函数:建立两个任务,一个是空闲任务,在任何任务没有就绪时运行,一个是统计任务,计算cpu的利用率.初始化 UCOSII 的所有变量和数据结构,2.OSTaskCreate 该函数返 ...
- Python快速建站系列-Part.Five.1-个人主页及发表文章
|版权声明:本文为博主原创文章,未经博主允许不得转载. 现在的TSSS已经有了注册和登录的功能,首页的内容也填充好了,那这一节就完成用户个人主页的内容和发表文章功能的实现. 先完成用户个人主页的use ...
- 怎样手动添加 Sublime 3 右键菜单
[Version] Signature="$Windows NT$" [DefaultInstall] AddReg=SublimeText3 [SublimeText3] hkc ...
- mysql常用命令（1）
Mysql安装目录数据库目录/var/lib/mysql/配置文件/usr/share/mysql(mysql.server命令及配置文件)相关命令/usr/bin(mysqladmin mysqld ...
- top free综合监控工具
top选项: -d:指定刷新时间间隔 -n:指定刷新次数 -u:指定只显示user用户的进程信息 -p:指定只显示pid的进程信息 [root@linuxzgf ~]# top Mem: 817449 ...
- xcode8集成百度地图(framwork包) archive是bitcode问题
(1)问题描述:真机和模拟器测试都能编译安装,但是需要打包archive的时候 总是编译出错,眼看就要上线了,还出现这问题,纠结啊.... 打印出来的错误: ld: bitcode bundle co ...
- c#下载网页源码的两种方法
1.WebClient: System.Net.WebClient wc = new System.Net.WebClient(); Byte[] pageData = wc.DownloadData ...
- java并发编程参考资料
1.java编程思想 2.java并发编程实战 3.java并发编程的艺术 4.http://www.infoq.com/cn/author/%E7%A8%8B%E6%99%93%E6%98%8E#文 ...