正文 

当前位置： 首页 > java > java教程

常用布局的实现（两列布局三列适应布局，两列等高适应布局等）

Angelina Angelina     2022-09-03     616

关键词：

两列布局：左侧定宽，右侧自适应
方法一：利用float和负外边距

<style>
  * {
	margin: 0;
	padding: 0;
}

.main,.sitebar {
	font: bolder 20px/300px;
}

.main {
	width: 100%;
	float: left;
}

.main .content {
	margin-left: 200px;
	background-color: red;
}

.sitebar {
	width: 200px;
	float: left;
	background-color: green;
	margin-left: -100%;
}
  </style>
<div class="main"> 
   <div class="content">
     右侧主体自适应区块 
   </div> 
  </div> 
  <div class="sitebar">
    左侧定宽200px区块 
</div>
  • 优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。
  • 缺点：多添加了一层div包裹。

方法二：利用外边距

<style>       
 * {
	margin: 0;
	padding: 0;
}

.sitebar {
	float: left;
	width: 200px;
	background-color: green;
}

.content {
	background-color: red;
	margin-left: 200px;
}   
 </style>
<div class="sitebar">
   左侧定宽200px区块
  </div> 
  <div class="content">
   右侧主体自适应区块
</div>
  • 优点：代码简洁，便于理解
  • 缺点：不利于页面优化，右侧主内容区后加载

方法三：利用position

<style>        
* {
	margin: 0;
	padding: 0;
}

.sitebar {
	width: 200px;
	background-color: green;
}

.content {
	position: absolute;
	left: 200px;
	right: 0;
	top: 0;
	background-color: red;
}   
 </style>
<div class="content">
   右侧主体自适应区块
  </div> 
  <div class="sitebar">
   左侧定宽200px区块
</div>
  • 优点：考虑到了页面优化，右侧内容区先加载
  • 缺点：目测没有

上述三种方法兼容 IE7 以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素 font-size=0 ，再分别设置 子元素 font-size解决。

方法四：利用flex布局

<style>        
* {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.content {
	flex: 1;
	background-color: red;
}

.sitebar {
	flex: 0 0 200px;
	order: -1;
	background-color: green;
}            
</style>
<div class="main"> 
   <div class="content">
    右侧主体自适应区块
   </div> 
   <div class="sitebar">
    左侧定宽200px区块
</div>
  • 优点：CSS3新布局方式，高大上
  • 缺点：仅支持 IE11+

三列布局：左右定款，中间自适应。

方法一：使用负外边距

<style>        
* {
	margin: 0;
	padding: 0;
}

.main,.left,.right {
	height: 300px;
	font: 20px/300px;
	color: #fff;
	text-align: center;
}

.main {
	width: 100%;
	float: left;
}

.main .content {
	margin: 0 300px 0 200px;
	background-color: black;
}

.left {
	width: 200px;
	float: left;
	margin-left: -100%;
	background-color: red;
}

.right {
	width: 300px;
	float: left;
	margin-left: -300px;
	background-color: blue;
}  
</style>
<div class="main"> 
   <div class="content">
    中间主体区域宽度自适应
   </div> 
  </div> 
  <div class="left">
   左侧定宽200px
  </div> 
  <div class="right">
   右侧定宽300px
</div>
  • 优点：兼容IE7+，考虑到页面优化，中间内容区先加载
  • 缺点：多一层div嵌套，不易理解

方法二：使用绝对定位

<style>
body {
	margin: 0px;
}
#left {
	background-color: #E8F5FE;
	border: 1px solid #A9C9E2;
	height: 400px;
	width: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#center {
	background-color: #F2FDDB;
	border: 1px solid #A5CF3D;
	height: 400px;
	margin-right: 102px;
	margin-left: 102px;
}

#right {
	background-color: #FFE7F4;
	border: 1px solid #F9B3D5;
	height: 400px;
	width: 100px;
	position: absolute;
	top: 0px;
	right: 0px;
}
</style>
 <div id="center">
   中列
  </div> 
  <div id="left">
   左列
  </div> 
  <div id="right">
   右列
  </div>
  • 优点：代码结构简单，考虑到了页面优化，中间内容去先加载
  • 缺点：目测没有

方法三：使用flex布局

<style>
.HolyGrail-body {
	display: flex;
	flex: 1;
}

.HolyGrail-content {
	flex: 1;
	background-color: green;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
	flex: 0 0 200px;
	background-color: blue;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
	order: -1;
	background-color: grey;
}
</style>
<div class="HolyGrail-body"> 
   <main class="HolyGrail-content">
    ...
   </main> 
   <nav class="HolyGrail-nav">
    ...
   </nav> 
   <aside class="HolyGrail-ads">
    ...
   </aside> 
  </div>
  • 优点：高大上
  • 缺点：仅支持IE11+

css三列布局

...前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应... 查看详情

css两列自适应布局的4种思路

...路一】float　　在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所 查看详情

布局：左宽度固定，右边自适应

需求：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高） 方法1：浮动布局这种方法我采用的是左边浮动，右边加上一个margin-left值... 查看详情

三列自适应布局

分析了两列自适应布局的实现思路后，会觉得三列自适应布局的实现原理其实和他一模一样，不过是多了一个盒子而已。第一类，浮动在前：<divclass="left"></div><divclass="right"></div><divclass="main"></div>方法... 查看详情

抛砖引玉之宽度自适应布局

什么是宽度自适应布局呢？就是当浏览器窗口大小改变时，浏览器里的元素宽度也随之改变，从而达到自适应布局。常见的宽度自适应布局有：1、 两列：左边宽度不变，右边宽度自适应2、 三列：左右两边宽度不变，中... 查看详情

两列自适应布局

两列自适应布局随便拿一个搜索引擎搜索一下“两列自适应布局”，都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么，他们是怎么得来的。分析：需要满足三个要求：①两个盒子在同一行②右边的盒子需... 查看详情

两列布局三列布局以及等高布局

在了解布局之前，需要先掌握BFC、margin折叠。这里简单对这两个概念做介绍。1.BFC(blockformattingcontents)，块级格式上下文。  产生条件：跟元素；浮动或者定位包括absolute和fixed；overflow不为visiable；display为inline-block,table-cell,... 查看详情

css布局两列布局之单列定宽,单列自适应布局思路

...基本的布局形式。比如斗鱼的直播间，后台管理系统都是常用的我们将从float,inline-block,table,absolute,flex,grid这几个布局方式来实现这种效果float【float+margin】将定宽的一列使用float，而自适应的一列使用计算后的margin<style>.f1.pa... 查看详情

特殊的三列布局-左右两列宽度固定，中间自适应

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

网页布局-左侧固定，右侧自适应

在网页布局中，以前只考虑了两列、三列的布局方式，但是没有过多的去考虑在两列、三列布局的情况下实现某些自适应的情况；今天遇到这个问题，在这里mark一下； 方法一：左侧元素浮动或者绝对定位的方式脱离文档流... 查看详情

两列布局实现自适应的方法

...度的那个div）设置了浮动，哪个div标签放在html前面两列布局，左侧div自适应，右侧div固定宽度：<divclass="my-line"><divclass="line-right">北京京东尚科信技术司</div><!--右侧div宽度固定，所以设置了右浮动，放在前面-->... 查看详情

两列自适应布局

目的：想要在网页中实现自适应两列布局，即左边一列是固定宽度的，右边一列的宽度等于屏幕宽减去左边的宽度（或相反）。分析：需要满足三个要求：①两个盒子在同一行②右边的盒子需要占满剩下的空间③两个盒子不能重... 查看详情

css两列布局中单列定宽单列自适应布局的6种思路

前面的话　　说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局float【思路一】float　　说起两列布局，最常见的就... 查看详情

css两列布局的n种实现

一、什么是两列布局　　两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在CSS面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下... 查看详情

两列布局中单列定宽单列自适应布局的5种思路

思路一:float　　说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。如果各浮动元素的高度不同时，可能会出犬牙交错的效果【1】float+margin　　将定宽的... 查看详情

两列布局（一列定宽，一列自适应）

用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动登高）1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<styletype="text/css"> 查看详情

双飞翼布局和圣杯布局解析

今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下，大概明白怎么做，但是并没有去延伸一下...还有它的孪生兄弟：圣杯布局。今天仔细的琢磨了一下；突然发现其实内容还不少的样子。双飞翼布局或者说... 查看详情

实现左侧固定右侧自适应的两列布局显示效果

实现该方法有很多种,我来介绍一下几种比较常见的实现效果:第一种方案(利用固定定位的方式显示效果):<style>*{padding:0;margin:0;}.left-menu,.content{position:fixed;top:0;left:200px;width:100%;height:100%;background:red;color:#fff;}.left-menu{wid 查看详情