三栏式布局

原创 2018年04月15日 22:34:20

三栏式布局

两中方式:

  1.利用定位的方法做左右两栏

<style type="text/css">  
.wrap{width:90%; background-color:#ccc; margin:0 auto; position:relative;}  
.left{width:200px; background-color:blue; height:300px; position:absolute; left:0; top:0;}  
.right{width:250px; background-color:green;height:300px; position:absolute; right:0; top:0;}  
.main{background-color:red; color:#fff;height:300px; margin:0 250px 0 200px;}  
</style>  
</head>  
<body>  
<div class="wrap">  
    <div class="left"></div>  
    <div class="main"></div>  
    <div class="right"></div>  
</div>  
</body>  

 2.利用左右浮动的方式做左右两栏

<style type="text/css">
.wrap{width:90%; background-color:#ccc; margin:0 auto; overflow:hidden;} 
.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%;}
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px;}
.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}
.main>div{margin:0 250px 0 200px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="main"><div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div>
	<div class="left"></div>
    <div class="right"></div>
</div>
</body>

版式布局利器InDesign

-
  • 1970年01月01日 08:00

HTML之基本布局设计之三栏式、两栏式设计

本文主要介绍的是如何构建布局,主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素,接下来就直接上代码吧...
  • u013816144
  • u013816144
  • 2015-11-21 10:27:40
  • 3878

纯css实现三栏式布局

1.相对定位+float+margin负值(圣杯布局) 使用relative:relative定位(圣杯布局) 我是中间 我是左边 我是右边...
  • web_hwg
  • web_hwg
  • 2017-03-28 15:12:58
  • 328

关于三栏式布局的几种方式

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲外部的自适应架构...
  • Airfald
  • Airfald
  • 2017-02-28 18:09:50
  • 603

css实现经典管理系统布局,三栏式

  • 2016年06月23日 18:53
  • 534B
  • 下载

六种三栏式布局

layout html,body{ margin: 0; padding: 0; hei...
  • MrZZhou
  • MrZZhou
  • 2017-08-21 14:59:49
  • 317

Html+Css实现三栏布局响应式

宽度自适应布局 body,div { margin:0; padding:0; } div { height:50...
  • qq_26334813
  • qq_26334813
  • 2016-12-09 21:51:03
  • 925

div+css三栏式布局

最近组队报名参加了百度前端技术学院,里面有针对学习前端各个不同阶段的任务,然后在git上推送自己写的任务代码,也可以查看别人的代码,通过这种方式来相互学习。然后我选了几个任务,其中就有一个是div+c...
  • xiaoxixi_blog
  • xiaoxixi_blog
  • 2016-03-19 01:04:28
  • 572

关于三栏布局(浮动法/定位法/margin负值法)

三栏布局就是页面布局主要分为左中右三个部分,普遍为左、右固定中间自适应的形式。 1.定位法三栏布局:CSS代码:html , body { margin: 0; pa...
  • Beng_shakalaka
  • Beng_shakalaka
  • 2017-07-18 15:59:53
  • 323
收藏助手
不良信息举报
您举报文章:三栏式布局
举报原因:
原因补充:

(最多只允许输入30个字)