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 ...
随机推荐
- c++builder Form重载WindowProc、WndProc 截获消息
c++builder 重载WindowProc.WndProc 截获消息 方法一WindowProc void __fastcall myWindowProc(Messages::TMessage ...
- 19-EasyNetQ：用EasyNetQ.Hosepipe重新提交错误信息
EasyNetQ.Hosepipe是EasyNetQ队列管理工具.用来取回队列中的消息并重新发布这些消息.还可以用它来检测错误队列,并重试发布消息. 用法 EasyNetQ.Hosepipe.exe ...
- 最小的VIM操作指南
最小VIM操作指南 vim的操作命令非常多,为了能开始工作,必须学会一个最小的vim操作集合,这里做个总结. 1.插入.追加.插入新行 i:在当前光标所在字符的前面插入,当前字符及其后面的字符后撤 a ...
- dom方式解析xml文件的步骤
使用java类即可
- 字节流之文件输出流FileOutputStream
文件拷贝:
- 【总结整理】pv、uv
1.pv的全称是page view,译为页面浏览量或点击量,通常是衡量一个网站甚至一条网络新闻的指标.用户每次对网站中的一个页面的请求或访问均被记录1个PV,用户对同一页面的多次访问,pv累计.例如, ...
- hibernate 一对多（级联关系）
hibernate 核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hiber ...
- codefirst 最新策略
http://www.yunjuu.com/info/76058.html 在原有数据库中使用 CodeFirst ,除了第一次添加实体后要立即执行一次 Enable-Migrations add-m ...
- hdu 4768 Flyer (异或操作的应用)
2013年长春网络赛1010题 继巴斯博弈(30分钟)签到后,有一道必过题(一眼即有思路). 思路老早就有(40分钟):倒是直到3小时后才被A掉.期间各种换代码姿态! 共享思路: unlucky st ...
- BBS后台发送邮件&修改文章
一:Django发送邮件 在setting中配置 # EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST ...