稳定灵活的 HTML 列式布局
主要特点：
- 所有列轻松实现相同高度
- 兼容性极高
------------------------------------------------ 代码 -----------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="cache-control" content="private" />
<style>
.col-layout {
height: 400px; /*布局的原始高度*/
border-collapse: collapse;
}
.col-layout .col {
padding: 0;
vertical-align: top;
}
.col-layout .left.col {
background-color: #557175;
}
.col-layout .right.col {
background-color: #635370;
}
.col-layout .col-content {
overflow: hidden;
}
.col-layout .left.col .col-content {
width: 400px; /*列宽度*/
}
.col-layout .right.col .col-content {
width: 600px;
}
</style>
</head>
<body>
<table class="col-layout">
<tr>
<td class="left col">
<div class="col-content">
<!--列的真正内容-->
<div style="height: 1000px; width: 2000px; background-color: #83dcbe">Will be hidden</div>
</div>
</td>
<td class="right col">
<div class="col-content">
</div>
</td>
</tr>
</table>
</body>
</html>
稳定灵活的 HTML 列式布局的更多相关文章
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- Flutter 流式布局列表实例+上拉加载
页面变化的几种方式: 一.StatefulWidget的setState形式 先声明两个变量. ; List<Map> list = []; 写了一个方法,获取数据: void _getH ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 关于CSS三列Float布局任务
任务目标 掌握HTML/CSS布局的概念 掌握盒模型的概念 掌握position与float的概念以及在布局时的用法 任务描述 使用 HTML 与 CSS 按照示意图;实现三栏式布局. 左右两栏宽度固 ...
- css两列自适应布局的多种实现方式及原理。
两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...
- Gumby – 基于 Sass 的灵活的，响应式 CSS 框架
Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...
- CSS：使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
- 流式布局&固定宽度&响应式&rem
我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...
随机推荐
- ThinkPhp单字母函数
首先A.D.S.L.C.F.I 他们都在 /THINKPHP/Common/functions.php 这个文件中 下面我分别说明一下他们的功能 A() 加载Action类 D() 加载Model类 ...
- Three.js开发指南---使用three.js里的各种光源（第三章）
本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...
- Delphi、C C++、Visual Basic数据类型的对照 转
Delphi.C C++.Visual Basic数据类型的对照 变量类型 Delphi C/C++ Visual Basic 位有符号整数 ShortInt char -- 位无符号整数 Byte ...
- Python入门2
字符串操作 字符串是语言中使用最多的,下面我们来看看python为字符串提供哪些方法: 1.upper().lower().title() 这3个方法都是返回一个新的字符串.重要性:** name = ...
- 修复sublime text系统右键菜单
修复sublime text系统右键菜单 安装完Sublime Text2后,拿掉电脑里面的备用硬盘,导致每次使用Open with Sublime Text2的时候,都会出错,打开注册表,找到 HK ...
- VS2010 下 将 EntityFramework 的版本从 4.0 升级到 5.0
1. 下载安装 EF 5.x DbContext Generator for C# : 下载地址:https://visualstudiogallery.msdn.microsoft.com/da74 ...
- php 升级排错
lnmp 环境下,升级php版本,模块都加载完成,数据库,nginx 设置都完好,但php 只能用ip 访问数据库,不能用localhost,处理要设置php.ini 的三个mysqld.sock,还 ...
- C#封装好的Win32API
Kernel.cs using System; using System.Runtime.InteropServices; using System.Text; using HANDLE = Syst ...
- unix&linux大学教程 目录
第1章unix简介 第2章什么是linux?什么是unix 第3章unix连接 第4章开始使用unix 第5章gui:图形用户界面 第6章unix工作环境 第7章unix键盘使用 第8章能够立即使用的 ...
- c++指针与引用问题
本来是回答问题的,到这里做个笔记 *&L是指针的引用,实参是个指针.所以L是实参指针的别名,对别名L的修改,等于对实参的修改.*L是传值,你无法改变传过来的实参指针变量的值程序代码: #inc ...