左侧定宽，右侧自适应
.left {
width: 200px;
height: 600px;
background: red;
float: left;
text-align: center;
line-height: 600px;
color: #fff;
}
.right {
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
第一种 浮动
当宽度小于左右宽度之和时右侧栏会掉下去
效果
第二种 flex
不限定middle高度会随着right的高度走
CSS布局 CSS布局方案整理
css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...
css flex布局详解 css flex布局详解1css flex布局详解2
圣杯布局 HTML CSS 双飞翼布局 HTML CSS Flex布局 HTML和圣杯布局一样CSS
圣杯布局 css html 双飞翼布局 css html
@(CSS)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性 一直感觉自己对CSS的各个属性很了解，可...
div+css布局 表格布局 table布局 div+css布局 浮动布局 块状元素和行内元素 display:...
1CSS没有布局 2 CSS布局属性 2.1 css display属性 2.2 css margin: auto...
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布...
HTML CSS + DIV实现整体布局必备知识利用HTML和CSS实现常见的布局 单列布局 css 实现竖直居中...
本文标题：css布局
本文链接：https://www.haomeiwen.com/subject/quvygxtx.html
网友评论