CSS布局之两列布局

两列布局

两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果；
左列自适应, 右列定宽

float + margin 属性实现；

float + overflow 属性实现；

display 属性的 table 相关值实现；

使用绝对定位实现；

使用 flex 实现；

使用 Grid 实现；

方案一：float + margin 属性实现

<style>*{margin: 0;padding: 0;}#left {width: 400px;/* 左列定宽 */height: 300px;background-color: #c9394a;float:left;/* 浮动 */}#right {//右列自适应height: 400px;background-color: #cccccc;margin-left: 400px;}#inner {height: 300px;background-color: green;/* 清除浮动属性会掉下来 */clear:both;}</style>
</head><body><div id="left"></div><!-- 自适应容器 --><div id="right"><div id="inner"></div></div>
优点：实现方式简单
缺点：自适应元素 margin 属性值需要与定宽元素的 width  属性值保持一致；定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好；
右列自适应元素中定义的了加 clear:both 的子级元素会出问题；

方案二: float + margin(fix) 实现

具体方案如下：
给左边一个盒子设置左浮动(float:left;)，右边的盒子套一个 right-fix 并给 right-fix设置右浮动 float: right; 和自适应宽度 width: 100%;
让 right-fix 这个盒子反向移动左盒子宽度的大小 margin-left:-400px;
給左盒子添加一个相对定位，提高他的层级性，从而显示出来
给右边的子容器设置一个 margin-left：400px；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.left {width: 200px;height: 300px;background-color: blue;float: left;//给左边一个盒子设置左浮动position: relative;}.right-fix {float: right;//右浮动width: 100%;//右宽度自适应margin-left: -200px;/*反向移动左盒子的200px，并将其完全盖住，需给子盒子设定  margin-left: 200px;*/}.right {width: 100%;height: 400px;background-color: chartreuse;margin-left: 200px;}</style></head><body><div class="left"></div><div class="right-fix"><div class="right"></div></div></body>
</html>

方案二： float + overflow 属性实现；

具体的：
1.给左边固定宽度盒子加浮动属性float: left;
2.给右边自适应宽度盒子加浮动属性 overflow: hidden;;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.left {width: 200px;height: 300px;background-color: blue;float: left;}.right {height: 400px;background-color: chartreuse;overflow: hidden;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>
优点: 简单易用 全兼容
缺点: overflow 属性不仅解决了两列布局问题，同时设置了内容溢出的情况；

方案三：display 属性的 table 相关值实现

给父元素设置display：table；
给子元素设置display：table-cell；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>两列布局解决方案4-table+table-cell</title><style>*{margin: 0;padding: 0;}#parent {width: 100%;height: 400px;/* table */display: table;}#left {/* td */display:table-cell;width: 400px;  /* 定宽 */height: 300px;background-color: #c9394a;}#right {display:table-cell;height: 400px;background-color: #cccccc;}</style>
</head><body><div id="parent"><div id="left"></div><div id="right"></div></div>
</body>
</html>
优点: 浏览器兼容比较好
缺点: 将所有元素的 display 属性设置为 table 相关值，受到相应制约；

方法四：使用绝对定位实现

1.给左边盒子设置定位 position: absolute;top:0;left:0;
2.给右边的盒子设置position: absolute;top:0;right:0;left:400px;

<style>*{margin: 0;padding: 0;}#parent{position: relative;}#left {width: 400px;  /* 定宽 */height: 400px;background-color: #c9394a;position: absolute;top:0;left:0;}#right {height: 500px;background-color: #cccccc;position: absolute;left:400px;right:0;top:0;}</style>
</head><body><div id="parent"><div id="left"></div><div id="right"></div></div>
</body>

方案五：使用 flex 实现

1.给父元素设置display: flex;
2.给右边自适应设置 flex:1;这相当于100%-左定宽

<style>*{margin: 0;padding: 0;}#parent{width: 100%;height: 500px;/* 子元素 - 水平排列 */display: flex;}#left {width: 400px;  /* 定宽 */height: 400px;background-color: #c9394a;}#right {/* 100% - 400 */flex:1;height: 500px;background-color: #cccccc;}</style>
</head><body><div id="parent"><div id="left"></div><div id="right"></div></div>
</body>

方案六：使用 Grid 实现

1.给父元素设置 display: grid;
2.去掉左右盒子的宽度并给父元素设置 grid-template-columns:400px auto;这表示左边设置400宽度，右边自适应。

 <style>*{margin: 0;padding: 0;}#parent{width: 100%;height: 500px;/* 网格布局 */display: grid;/* 每个列的宽度  左 - 400px  右 - 自适应 */grid-template-columns:400px  auto;}#left {height: 400px;background-color: #c9394a;}#right {height: 500px;background-color: #cccccc;}</style>
</head><body><div id="parent"><div id="left"></div><div id="right"></div></div>
</body>

CSS布局之两列布局相关推荐

常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
单列布局、两列布局、三列布局
一. 单列布局 HTML 代码: 1 <div id="header"> 2 <h2>Page Header</h2> 3 < ...
div+css经典三行两列布局
写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
CSS 垂直居中、多列布局
阅读目录垂直居中基本实现思路单列布局示例网站两列布局示例网站两列布局的实现第 1 步,写好 HTML 结构.这里为了查看方便,我们为布局容器设置背景颜色和高度. 第 2 步,将布局容器 ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

CSS布局之两列布局

两列布局

CSS布局之两列布局相关推荐

最新文章

热门文章