主要特点：

  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. EnumRemarkAttribute,获取属性值

    首先自定义一个RemarkAttribute [html] view plain copy using System;  using System.Collections.Generic;  usin ...

  2. centos安装mongodb 3.2.9

    centos 6.5 x64 1.下载地址:用迅雷下载,直接下载下不动 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.2 ...

  3. 免装版tomcat注册成windows系统服务方法

    如果一台服务器要部署两个应用,而且又各自不受影响的话,只能使用两个端口两个tomcat分别管理 在这里吐槽一下tomcat,为毛停止服务就把所有应用都停了,更新其中一个,就要把所有的都停了,然后更新完 ...

  4. NSString和NSMutableString常用方法+NSArray常用代码 (转)

    常见的NSString和NSMutableString方法: NSString方法: [plain] view plaincopy   +(id) stringWithContentsOfFile:p ...

  5. [zz]谱聚类

    了凡春秋USTC 谱聚类 http://chunqiu.blog.ustc.edu.cn/?p=505 最近忙着写文章,好久不写博客了.最近看到一个聚类方法--谱聚类,号称现代聚类方法,看到它简洁的公 ...

  6. css3 打勾 打叉

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JAVA NIO简介-- Buffer、Channel、Charset 、直接缓冲区、分散和聚集、文件锁

    IO  是主存和外部设备 ( 硬盘.终端和网络等 ) 拷贝数据的过程. IO 是操作系统的底层功能实现,底层通过 I/O 指令进行完成. Java标准io回顾 在Java1.4之前的I/O系统中,提供 ...

  8. 给破坏性的Rake任务加把锁 | Rails

    抄自这里 直接贴代码 # lib/tasks/skip_prod.rake desc 'Raises exception if used in production' task skip_prod: ...

  9. <<软技能,代码之外的生存技能>>读书笔记

    管理 1. 制定大目标,再分解成小目标,定时反思自己的长期和短期的成果 2. 人都希望自己很重要, 要让下属有存在感,让他们做事有成就感 3. 奖励积极比惩罚消极更有用 4. 学会换位思考,不要用&q ...

  10. [经验交流] docker in docker 的变通实现方法

    最近在做CI持续集成环境的容器化,其中一个工作是:在容器中构建容器镜像. 对于这个需求,网上有一些 Docker in Docker 的方法,具体需要修改宿主机的配置.这种方式在单机环境下.对安全要求 ...