利用CSS的float属性可以将元素并排，做出三列并排的布局。

如这样的效果

实现的原理：只要将3个元素设置float属性，属性值为left，同时指定不同比例的宽度，及高度。

下面是实现代码

<!DOCTYPE html>

<html>

	<head>

		<title>元素并排</title>

		<meta charset="UTF-8">

		<style type="text/css">

			body{margin:0px;padding:0px;}

			.column1{

				float:left;

				width:33.33333%;

				background-color:#706fd3;

				min-height:800px;

			}

			div{color:#fff;}

			.column2{

				float:left;

				width:33.33333%;

				background-color:#ff793f;

				min-height:800px;

			}

			.column3{

				float:left;

				width:33.33333%;

				background-color:#218c74;

				min-height:800px;

			}

	   </style>

	</head>

	<body>

		<h1>软件开发，成就梦想</h1>

        <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

		<div>

			<div class="column1">column1</div>

			<div class="column2">column2</div>

			<div class="column3">column3</div>

		</div>

	</body>

</html>

　　

本文转载自https://www.wangshenghua.com/wiki/css/25d08e3dd686670a36aabaaae8770df1/

已经获得作者许可，欢迎转载！

HTML5+CSS实现三列布局自适应的更多相关文章

  1. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  2. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  3. 纯CSS实现三列布局(两边固定，中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...

  4. CSS 经典三列布局

    一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...

  5. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

  6. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  7. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  8. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

  9. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

随机推荐

  1. 系统环境变量PATH被删除后从注册表恢复

    转自:https://wenku.baidu.com/view/75d0b6ec19e8b8f67c1cb958.html 首先需要了解path这个环境变量有什么用: 当你打开命令提示窗口时,即win ...

  2. 监控Mongo慢查询

    监控Mongo慢查询 1. 使用mongostat监控MongoDB全局情况 mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取MongoDB的当前运行状态,并输 ...

  3. JanusGraph ：Cassandra作为存储后端的情况下，JanusGraph的安装方法

    Cassandra作为存储后端的情况下,JanusGraph的安装方法 Cassandra作为存储后端的情况下,JanusGraph的安装分为四种方式. 分别是: 1.本地服务器模式(这里的服务器指的 ...

  4. Gym 101606 F-Flipping Coins（概率dp）

    参考博客:http://www.cnblogs.com/kang000/p/8571071.html  (这篇博客写的真的走心,ORZ) 题意有n个硬币排成一排,开始的时候所有的硬币都是正面朝下,你必 ...

  5. 场景中，并没有灯源的存在，但是cube却会有灯光照射的反应，这就是Light Probe Group的作用。

    http://blog.csdn.net/qq617119142/article/details/41674755

  6. SQL 数据库 学习 002 如何启动 SQL Server 软件

    如何启动 SQL Server 软件 我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Express 如果你还没有下载 SQL Serv ...

  7. python之yield函数

    yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法. 只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子: def addlist( ...

  8. Yii2验证登录得User类

    Yii2中的  Class yii\web\User 是如果进行验证登录,如果我们使用User类验证登录会给我们减少很多麻烦.在此就拿Yii2中自带的登录功能进行说明. 配置.在应用配置文件compo ...

  9. reportng定制修改

    定制目的 最近接口测试和UI自动化测试都有用到reportng来做测试报告的展示,发现了几个不是很方便的地方: 报告没有本地化的选项 主页的测试结果显示的不够清晰 测试详情中的结果是按照名称排列的,想 ...

  10. 《the art of software testing》第五章

    构建大型程序测试的第一个步骤:模块测试 测试用例的设计 在为模块测试设计测试用例时,需要两种信息:模块的规格说明和模块源代码: 模块测试总体上面向白盒测试: 模块测试的测试用例设计过程:使用一种或多种 ...