【代码片段】三列布局

最新推荐文章于 2022-01-04 08:13:49 发布
最新推荐文章于 2022-01-04 08:13:49 发布
阅读量486 收藏
点赞数
分类专栏： 学习记录-html/css 文章标签： 三列布局 css 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title> //自适应
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.left{ width:20%; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 20%; background:#9CF}
.right{ height:600px; width:20%; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head>

<body>
	
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</body>
</html>

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>  //左右固定
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0}  //不能用浮动float，用absolute固定位置
.main{ height:600px; margin:0 240px; background:#9CF}   //margin定义右边240px，若左右均定义则为margin:0 240px 0 240px,若要增加空隙，则<span style="font-family: Arial, Helvetica, sans-serif;">margin:0 250px 0 250px，增大空隙</span>
.right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head>

<body>
	
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</body>
</html>


叶炀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css一行三列代码怎么写,css之页面三列布局(示例代码)
weixin_36048031的博客
08-04 2285
左右两边宽度固定，中间自适应第一种方法：左右两边绝对定位html代码css代码.left {height: 200px;width: 300px;background-color: blue;position: absolute;left:0;top:0}.right {width:300px;height: 200px;background-color: red;position: absolu...
DIV+CSS三列式布局的实现代码
张亚京
05-19 1044
实现代码如下: html> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> title>无标题文档title> style type="text/css"> *{margin-right:auto;margin-left:auto;font-size:12px;} #layer {h
三列布局代码示例
第三食堂
05-04 738
float:无效的情况下： body{ margin:0px; padding:0px; } .left{ width:300px; height:500px; background:#999; position:absolute; left:0px; } .right{ width:200px; height:500px; background:#CCC; positio
html三列布局源码,HTML三列布局 - 黄柳淞的个人页面 - OSCHINA - 中文开源技术交流社区...
weixin_39572764的博客
06-17 566
1.三列布局1三列布局body{padding: 0;margin: 0;}.left{width:33.3%;height: 500px;background-color: #ccc;float: left;}.middle{width:33.3%;height: 500px;background-color: #bbb;float: left;}.right{width:33.3%;heigh...
php 三列页面布局,CSS如何实现三列布局？实现三列布局的3种方法（代码示例）...
weixin_31967485的博客
03-26 346
本篇文章给大家带来的内容是介绍CSS如何实现三列布局？实现三列布局的3种方法(代码示例)。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。三列布局指的是两边两列定宽，中间的宽度自适应。常用三种方法：定位浮动弹性盒布局定位方式最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置定位方法创建三列布局*{margin: 0;paddin...
html5三列固定宽度布局代码,css实现左右顶头、宽度自适应的多列、多块并排，多列布局...
weixin_35079944的博客
06-08 394
今天在工作中遇到了一个问题：有三个div块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。我第一时间想到的是传统的三列布局，但传统的三列布局都是固定宽度加自适应宽度，从网上搜了好久都没有搜到结果。所以自己想办法。第一种想到的办法：第一种我准备用两边float，中间margin居中的方法。代码如下：css:.wrap{height:300px;width:95%;margi...
css三列布局（一）
zp1996323的博客
11-01 1034
这就是一个三列等高布局的效果，运用了padding补偿法，先上代码： dom结构：<div class="container"> <div class="left"> fefwefew </div> <div class="center"> wefwefwe </div> <div class="right">
实现三列布局
愚蠢的土拨鼠要变聪明的博客
09-25 783
1.浮动方案 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;style&gt; .left { float: left; height: 200px; width: 200px; background-color: red; } .right { wid...
三行三列的CSS布局
如来
10-08 1742
http://www.w3.org/TR/html4/strict.dtd">DIV布局测试div{ height:150px; } div.left{width:20%;float:left;clear:right; background-color:#eeeeee;   } div.center {width:50%;float:left;clear:right; background-c
三行代码实现流布局
yangernang的博客
11-04 376
demo地址:点击打开链接 效果图: 一,先讲怎么用: 第一行.设置flowLayout的padding和条目之间的距离 flowLayout.setPaddingAndSpacing(padding, hPadding, vPadding); 第二行.设置textview监听,这里用来自定义每个Textview flowLayout.setmTextViewListener
html布局帮手 php,html布局：html三列布局的实现代码
weixin_28687685的博客
03-18 172
本篇文章给大家带来的内容是关于html布局：html三列布局的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。CSS样式代码：/*********************公共标签样式********************//**********************main 外边框...
三列布局的几种方式
YuLi_Zoe的专栏
09-24 2619
一、绝对定位法两边用绝对定位，中间用margin，左右宽度固定，中间宽度不固定，中间主体放在左栏右栏后面（中间栏会占据整行）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .left{ width:400px; height:500px; background:red;
【不一样的CSS】实现三列布局的 5 种方式
一碗周
01-04 1433
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 三列布局概述 三列布局主要分为两种： 第一种是前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列
html面试题：三行三列布局，表格有合并，不准嵌套使用表格
热门推荐
walle的博客
05-14 1万+
html,body{padding:10px;margin: 0px;width:100%;height:100%;overflow: hidden;} td{width:100px; height:100px;text-align:center; font-family:arial; border:1px solid #aaa; vertical-align:center;}
网页布局：CSS实现一列二列三列和混合布局
baochanghong的专栏
07-18 1804
常见网站布局 网站常见的布局方式主要有一列布局，二列布局，三列布局和混合布局。 一列布局 效果图： 代码： CSS: body{margin:0;padding: 0;} .top{height:100px;background: blue;} .main{width:800px;height:300px;background: #c
三列布局
weixin_43571052的博客
11-20 746
三列布局：两边固定，当中自适应；中间列要完整地显示；中间列要优先加载。 分类：            圣杯布局：利用父容器的左右内边距+两个从列相对定位。                              浮动：搭建完整的布局框架。                             margin为负值：调整旁边两列的位置。（margin为负值将元素的边界往里收）      ...
三列布局自适应【四种方法】
qq_40072782的博客
05-07 1438
面试时遇到这样一个题，题目要求：分为左中右三列，左右两边固定宽度，均为200px；中间宽度自适应。当时没太明白，甚至把几个元素混为一谈了。得空了便来捋一捋。 我们先设这三块分别为left、middle、right。 1、浮动法 浮动法的原理： 对左右块使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。 注意： middle位置要求...
三列布局的三种方法
DaiDai的博客
03-05 1422
自身浮动法 此代码较简单，左栏左浮动，右栏右浮动，主栏内容放在最后，用margin 值为左右的宽度来实现自适应 注意:不浮动的元素要放在浮动元素后面绝对定位法 此方法与自身浮动法相似，但是使用的是绝对定位，左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主题栏采用左右的margin值来撑开距离 注意:采用浮动的方法时，浮动元素本身会占据其位置（对不浮动的元素来说，都浮动的元素不占据位置
18个实用jQuery代码片段提升Web开发效率
"这篇文章汇集了18个实用的jQuery代码片段，涵盖了网页开发中的各种功能，包括平滑滚动、节点操作、选择框限制、类名管理以及元素启用/禁用等。" 在Web开发中，jQuery作为一个强大的JavaScript库，极大地简化了DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值