主要特点：

  1. 所有列轻松实现相同高度
  2. 兼容性极高

------------------------------------------------ 代码 -----------------------------------------------------

<!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 列式布局的更多相关文章

  1. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  2. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  3. Flutter 流式布局列表实例+上拉加载

    页面变化的几种方式: 一.StatefulWidget的setState形式 先声明两个变量. ; List<Map> list = []; 写了一个方法,获取数据: void _getH ...

  4. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. 关于CSS三列Float布局任务

    任务目标 掌握HTML/CSS布局的概念 掌握盒模型的概念 掌握position与float的概念以及在布局时的用法 任务描述 使用 HTML 与 CSS 按照示意图;实现三栏式布局. 左右两栏宽度固 ...

  6. css两列自适应布局的多种实现方式及原理。

    两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...

  7. Gumby – 基于 Sass 的灵活的，响应式 CSS 框架

    Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...

  8. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  9. 流式布局&固定宽度&响应式&rem

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...

随机推荐

  1. NVMe over Fabrics又让RDMA技术火了一把

    RDMA是个什么鬼?相信大部分不关心高性能网络的童鞋都不太了解.但是NVMe over Fabrics的出现让搞存储的不得不抽出时间来看看这个东西,这篇文章就来介绍下我所了解的RDMA. RDMA(R ...

  2. ruby中tes-unitt数据初始化方法整理

    在用ruby做测试时,很多时候需要一些数据初始化以及事后的数据恢复还原之类的操作,下面整理了这些方法.require "test/unit" class TestAnion < ...

  3. UVA 494 Kindergarten Counting Game

    题目大意:输入一个字字符串,输出该字符串中所包含的"word"个数,其中"word"是指连续的字母(大小写均可) 题目思路:其实这是道水题,不过我考虑的时候,太 ...

  4. [MongDB] 主从架构--官方极力不推荐

    一.缘由: 看着数据库大家庭都有主从模式,想着Mongodb应该也不会落下.但从官网看来,先是早先舍弃了Master-Master模式,现在又在不推荐 Master-Slave模式,这是要标新立异呀. ...

  5. mongodb配置文件

    启动MongoDB有2种方式,一是直接指定配置参数,二是指定配置文件.这里先介绍配置文件,启动方式如下: 1.mongod --config /etc/mongodb.conf 配置如下: verbo ...

  6. 解析PHP正则提取或替换img标记属性

    <?php/*PHP正则提取图片img标记中的任意属性*/$str = '<center><img src="/uploads/images/20100516000. ...

  7. 注释驱动的 Spring cache 缓存介绍

    概述 Spring 3.1 引入了激动人心的基于注释(annotation)的缓存(cache)技术,它本质上不是一个具体的缓存实现方案(例如 EHCache 或者 OSCache),而是一个对缓存使 ...

  8. AutoCAD系统变量一览表

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...

  9. 现代工程仿真CAE技术介绍

    随着现代科学技术的发展,人们正在不断建造更为快速的交通工具.更大规模的建筑物.更大跨度的桥梁.更大功率的发电机组和更为精密的机械设备.这一切都要求工程师在设计阶段就能精确地预测出产品和工程的技术性能, ...

  10. JSON http://www.cnblogs.com/haippy/archive/2012/05/20/2509329.html

    js: JSON.stringify(idinfo)//将对象转化为 JSON串 //查询后为将json串赋值给表单 function _form1_load() {            AOS.a ...