主要特点：

  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. maven 环境搭建

    1.maven环境搭建 1)下载maven,http://maven.apache.org/download.cgi,到本地解压,然后配置环境变量 MAVEN_HOME:D:\software\apa ...

  2. 简述jsp之EL表达式和jstl及其使用

    Jsp的指令之include指令include指令:代表的是页面的包含. 作用:可以把一些jsp的页面包含在一起,对外展示. 页面的布局,现在已经不用了,现在都用css+div进行布局.include ...

  3. [2016.01.18]文本替换专家 v5.3

    文本替换专家,界面简洁易用,功能强大实用.支持大小写匹配,支持多级目录.多行文本.多种文件格式的同时批量查找和批量替换.智能准确的区分ANSI.UTF-8(包括无BOM的UTF-8).Unicode. ...

  4. javascript基础二数据类型

    1.数据类型 javascript中的基本数据类型有4中,undefined,number,string,boolean 1.1 typeof关键字 typeof关键字可以获取一个变量的的类型.先举个 ...

  5. open office操作word文档

    前段时间工作需要使用open office往word中写文件,写图片,以及向footer也就是页尾中插入图片,已经封装成了类,直接调用即可,代码如下: package com.test.common. ...

  6. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题   百度源代码如下 复制代码 代码如下: <!Do ...

  7. java和h5 canvas德州扑克开发中（二）

    德州扑克网页源码在github上分享 https://github.com/lxr1907/pokers 感兴趣的可以上去看下. 1.通讯使用websocket,主要在message.js中. 2.用 ...

  8. Spark算上下基线

    def baseLine(sc: SparkContext): Unit = { println("--------------------baseLine start----------- ...

  9. Scala的几个小tips

    1. Main方法只能写在object而不是class里 2. Unit test只能针对class或者trait,不能给object做,解决方法,把object里面要测的方法拿出来放到trait里, ...

  10. CentOS下安装LAMP环境

    1.安装Apache yum -y install httpd # 开机自启动 chkconfig httpd on # 启动httpd 服务 service httpd start #安装apach ...