HTML5+CSS实现三列布局自适应
利用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实现三列布局自适应的更多相关文章
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- 纯CSS实现三列布局(两边固定，中间自适应)
看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...
- CSS 经典三列布局
一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...
- CSS实现三列布局方法总结
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS三列布局之左右宽度固定，中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
随机推荐
- 【基础巩固】文件流读写、大文件移动 FileStream StreamWriter File Path Directory/ ,m资料管理器（递归）
C#获取文件名 扩展名 string fullPath = @"d:\test\default.avi"; string filename = Path.GetFileName(f ...
- linux上搭建图片服务器
之前写过一个搭建图片服务器的随笔:https://www.cnblogs.com/xujingyang/p/7163290.html ,现在回头看看,我去,感觉写的好乱,现在再整一个吧.o(╯□╰ ...
- _GNU_SOURCE宏
打开_GNU_SOURCE这个宏可以打开一些功能,比如为了在Linux系统上编译使用带有检测文件type的宏(S_ISxxxx): S_ISREG() //传入stat结构的st_mode,下同.是否 ...
- java方法学习记录
---恢复内容开始--- 方法重载:两个方法有相同的名字,但参数不同,就是方法重载,且不能仅仅依据修饰符或者返回类型的不同来重载方法. 命令行参数的使用 有时候你希望运行一个程序时候再传递给它消息.这 ...
- Luogu 4438 [HNOI/AHOI2018]道路
$dp$. 这道题最关键的是这句话: 跳出思维局限大胆设状态,设$f_{x, i, j}$表示从$x$到根要经过$i$条公路,$j$条铁路的代价,那么对于一个叶子结点,有$f_{x, i, j} = ...
- Entity Framework 6.0 Tutorials（6）：Transaction support
Transaction support: Entity Framework by default wraps Insert, Update or Delete operation in a trans ...
- SEO网站结构优化
结构布局优化:用扁平化结构(层次结构超过三层小蜘蛛就不愿意爬了) 控制首页链接数量(中小网站100以内,页面导航.底部导航.锚文字链接等) 扁平化的目录层次(小蜘蛛跳转3次可以到达网站内任何一个内页, ...
- Web API集成Azure AD认证
1.声明的介绍 基于角色的授权管理,适用于角色变化不大,并且用户权限不会频繁更改的场景. 在更复杂的环境下,仅仅通过给用户分配角色并不能有效地控制用户访问权限. 基于声明的授权有许多好处,它使认证和授 ...
- HandleErrorAttribute只能处理httpStatusCode为500的异常（服务器异常）
HandleErrorAttribute源代码: [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited ...
- Terminologies in MVC: Part 2 (Razor Engine Syntax vs Web Form)
By Abhishek Jaiswal :) on Mar 21, 2015 In this article we learn about Razor Engine Syntax vs Web For ...