固定宽度的两列布局
实际上在项目过程中，自适应宽度的两列布局很少使用，基本都是使用固定宽度的两列布局，因此在这里，我们只介绍固定宽度的两列布局如何实现。
固定宽度的两列布局需要将两列包围在一个大的div当中才可实现。将左边的div设置为左浮动，右边的div设置为右浮动即可。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>两列布局</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<div class="div0">
<div class="div1">
hello
</div>
<div class="div2">
world
</div>
</div>
</body>
</html>
main.css
padding
:
0
;
margin
:
0
;
.div0
{
width
:
800
px
;
height
:
400
px
;
background
:
#90A3A2
;
margin
:
50
px auto
;
.div1
{
width
:
300
px
;
height
:
400
px
;
background
:
#BB9797
;
float
:
left
;
text-align
:
center
;
.div2
{
width
:
500
px
;
height
:
400
px
;
background
:
#A2A876
;
float
:
right
;
text-align
:
center
;
结果如下：
固定宽度的两列布局 实际上在项目过程中，自适应宽度的两列布局很少使用，基本都是使用固定宽度的两列布局，因此在这里，我们只介绍固定宽度的两列布局如何实现。 固定宽度的两列布局需要将两列包围在一个大的div当中才可实现。将左边的div设置为左浮动，右边的div设置为右浮动即可。HTML代码：<!--自适应宽度的两列布局不常使用，一般使用固定宽度的两列布局--><!DOCTYPE html><
两列
布局
大概是最经典的一种网页
布局
方式了，本博客就是采用的这种
布局
。
两列
布局
中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何
实现
这种定宽+自适应的
两列
布局
。
1. absolute + margin 方式
首先想到的是利用 absolute + margin 的方式
实现
。先看看代码：
XML/
HTML
Code复制内容到剪贴板
<div u00a0class=container>
<div u00a0class=sidebar>子列</div>
<div u00a0class=main>主列</div>
文章目录一、
CSS
两栏
布局
（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex
布局
方法五：able
布局
二、
CSS
两栏
布局
（左列不定宽，右列自适应宽）
一、
CSS
两栏
布局
（左列定宽，右列自适应宽）
最终效果：
方法一：浮动+margin
HTML
：
<div class="container">
<div class="left">定宽</div>
<div class="right">自适应
两列
布局
（一侧固定宽度，一侧自适应），在工作中应该是经常
使用
到，可以说是前端基础了。这种
两列
布局
的样式是我们在平时工作中非常常见的设计，同时也是面试中要求
实现
的高频题。很有必要掌握以备不时之需。这里总结了几种
布局
方式，欢迎大家补充。
absolute + margin 方式
<div class="container">
<div class="sidebar">固定</div>
<div class="main">自适应</div>
今天写页面
布局
，突然想到了栅格
布局
，以往习惯了弹性
布局
，然后发现栅格
布局
有点香，然后就简单的整理了一下，用于学习与分享。 可以理解为将一个元素分成行列，然后可以设置对应的大小、
布局
、位置。
使用
grid-template-columns 划分列数
使用
grid-template-rows 划分行数假定一个需求，在一个容器内，左右列表，默认展示4列2行。（画的有点丑，哈哈哈哈）通过栅格
布局
进行页面的绘制。
上面代码发现，页面超出部分，高度不是25%了，那是因为容器外
<
html
><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
CSDN-Ada助手:
Matlab将.mat文件保存为.txt文件
高桥晋吾:
Matlab将.mat文件保存为.txt文件
无轻云不蔽月:
解决 html 表格错位的问题
BlueStragglers:
Matlab将.mat文件保存为.txt文件
weixin_42177603:
