CSS 一行两列
🌙
手机阅读
本文目录结构
二列固定宽度
<div id="left">左列</div>
<div id="right">右列</div>
CSS:
/*2列固定宽度*/
#left{
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
float: left;
}
#right{
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
float: left;
}
效果图：
二列自适应宽度
<div id="left-self-adaption">左列</div>
<div id="right-self-adaption">右列</div>
CSS:
#left-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 20%;
height: 300px;
float: left;
}
#right-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 70%;
height: 300px;
float: left;
}
左栏设置宽度为 20%，右栏设置宽度为 70%，看上去就像一个左侧为导航，右侧为内容区的常见网页布局形式。 效果图：
第二种
<div class="left"></div>
<div class="right"></div>
.left{
width:20%;
height: 500px;
float: left;
background:#333;
}
.right{
width:80%;
height:500px;
float: left;
background: pink
}
左侧固定，右侧宽度自适应
<div id="left-right-self-adaption">左列</div>
<div id="right-right-self-adaption">右列</div></div>
CSS:
/*2列右宽度自适应*/
#left-right-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 100px;
height: 300px;
float: left;
}
#right-right-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
height: 300px;
}
效果图：
二列固定宽度居中
<div id="layout-new-center">
<div id="left-center">左列</div>
<div id="right-center">右列</div>
</div>
CSS:
#layout-new-center{
margin: 0px auto;
width: 408px;
}
#left-center{
background-color: #cccccc;
border: 2px solid #333333;
width: 200px;
height: 300px;
float: left;
}
#right-center{
background-color: #cccccc;
border: 2px solid #333333;
width: 200px;
height: 300px;
float: left;
}
效果图：
顶部定高和左侧定宽，右侧自适应
1. 定位
父元素相对定位，左侧 left 绝对定位确定自适应高度并左对齐。右侧 right 通过绝对定位自适应高度和宽度
.body{
height: 100%;
position: relative;
background-color: #F5F7F9;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #F5F7F9;
position: absolute;
left: 0;
top: 80px;
bottom: 0;
right: 0;
}
.left{
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100px;
}
.right{
background-color: #F5F7F9;
position: absolute;
top: 0;
left: 100px;
bottom: 0;
right: 0;
}
2. float + margin
左侧 left 使用浮动，浮动元素半脱离文档流，与近邻元素位置重叠但不会与邻近元素内部文档重叠
.body{
height: 100%;
position: relative;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #afc7de;
position: absolute;
left: 0;
top: 80px;
bottom: 0;
right: 0;
}
.left{
background-color: #fff;
float: left;
width: 100px;
height: 100%;
}
.right{
background-color: #F5F7F9;
height: 100%;
margin-left: 100px;
}
3. BFC 布局
左浮动，右产生 BFC，利用 BFC 与 float 元素重叠的特征
4. flex 布局
flex-direction: column 布局自上而下，flex:1 让 section 布满除 header 外的所有区域。section 设置 flex，默认从左往右排列，flex:1 让 right 布满除 left 外的所有区域
.body{
height: 100%;
display: flex;
flex-direction: column;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #afc7de;
flex: 1;
display: flex;
}
.left{
background-color: #fff;
width: 100px;
}
.right{
flex: 1;
background-color: #F5F7F9;
}
CSS 两列布局
-
https://www.ucloud.cn/yun/114213.html
- 单列布局
- 普通单栏
- 通栏
- 双列布局
- 三列布局
- 水平等距排列
- flex 布局
- 圣杯布局
- 双飞翼布局
- 单列布局
-
https://xw.qq.com/cmsid/20180903A0TWTC00
- 水平居中布局
- 垂直居中布局
- 一列定宽，一列自适应（其他类似的类型都可以由此衍生）
- 多列等分布局
float + margin
用 float 将边栏与主要内容拉到一行，然后设置主要内容的 margin。
左边栏：
<main style="background-color: red;">
<aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
<section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>
右边栏
<main style="background-color: red;">
<aside style="background-color: yellow; float: right; width: 50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>
position: absolute + margin
左边栏：
<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">边栏</aside>
<section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>
右边栏
<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>
flex 布局
1）table 布局 当年主流的布局方式，第一种是通过 table tr td 布局 示例：
<style type="text/css">
table{
width: 800px;
height: 300px;
border-collapse: collapse;
}
.left{
background-color: red;
}
.right{
background-color: blue;
}
</style>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
</body>
页面效果： 文字自动垂直居中，很方便 同样可以设置左右的 width
第二种是类比表格的 table class 示例：
<style type="text/css">
.table{
display: table;
width: 800px;
height: 300px;
/*border-collapse: collapse;*/
}
.tb_row{
display: table-row;
}
.tb_cell{
display: table-cell;
vertical-align: middle;
}
.left{
background-color: red;
}
.right{
background-color: blue;
}
table
</style>
<body>
<div class="table">
<div class="tb_row">
<div class="left tb_cell">左</div>
<div class="right tb_cell">右</div>
</div>
</div>
</body>
页面效果： 跟表格布局一样
2）flexbox 布局
- 两列布局 关键：父级元素设置 display：flex
示例：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 300px;
display: flex;
}
.left{
width: 300px;
height: 100%;
background: red;
}
.right{
flex: 1;
height: 100%;
background: blue;
}
</style>
<body>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
左右浮动方式 首先需要定义一个清除浮动的类，并把他放在父元素上 0 子元素上左边的儿子左浮动，右边的右浮动，宽度给百分比，高度的话由子元素内容撑起来
.left {
float:left;/* 只写关键代码，以下内容同理 */
width:50%;
}
.right {
float:right;
width:50%;
}
flex 方式 在父元素上添加 display: flex; 2 个子元素添加 flex:1; 当然也可以给左边的指定宽度然后右边自适应。 父元素的高度等于子元素中最高的
.wrapper {
display: flex;
}
.left {
flex:1;
background: #999;
}
.context {
flex: 1;
height: 300px;
}
sxxxxxx
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter #dv1{float:left;width:280px;}
#bodycenter #dv2{float:right;width:410px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
左侧固定，右侧自适应
1）使用 float 和 margin
<div class="box">
<div class="left"></div>
<div class="right-fix">
<div class="right">Hello, world</div>
</div>
</div>
CSS：
.box { overflow: hidden }
.left {
float: left;
width: 200px;
height: 100px;
margin-right: -200px;
background: #888;
}
.right-fix {
float: right;
width: 100%;
}
.right {
margin-left: 200px;
height: 90px;
background: #36C;
}
2）使用 display: table 实现
<div class="box">
<div class="left"></div>
<div class="right">Hello, world</div>
</div>
CSS：
.box {
display: table;
table-layout: fixed;
width: 100%;
}
.left {
display: table-cell;
width: 200px;
height: 100px;
background: #888;
}
.right {
display: table-cell;
height: 100px;
background: #36C;
}
3）使用定位实现
<div class="box">
<div class="left"></div>
<div class="right">Hello, world</div>
</div>
CSS：
.box {
position: relative;
}
.left {
position: absolute; left: 0; top: 0;
width: 200px;
height: 100px;
background: #888;
}
.right {
height: 100px;
margin-left: 200px;
background: #36C;
}
4）使用 flex 布局
<div class="box">
<div class="left"></div>
<div class="right">Hello, world</div>
</div>
CSS：
.box {
display: flex;
}
.left {
flex: 0 0 200px;
width: 200px;
height: 100px;
background: #888;
}
.right {
flex: 1;
height: 100px;
background: #36C;
}
1 左侧 div 设置 float 属性为 left，右侧 div 设置 margin-left 属性等于或大于左侧 div 宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 300px;
background: #bfbfbf;
}
.right {
margin-left: 310px;
height: 300px;
background: #efefef;
}
</style>
</head>
<body>
<p>1 左侧 DIV 设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
实际效果：
2 左侧 div 设置 float 属性为 left，负边距 100%，右侧 div 中嵌套一个 div，页面内容放入嵌套的 div 中，右侧内嵌 div 设置 margin-left 属性等于或大于左侧 div 宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 300px;
background: #bfbfbf;
margin-right: -100%;
}
.right {
float: left;
width: 100%;
}
.right-content {
height: 300px;
margin-left: 310px;
background: #efefef;
}
</style>
</head>
<body>
<p>2左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>
<div class="left">left</div>
<div class="right">
<div class="right-content">right</div>
</div>
</body>
</html>
实际效果：
3 如果将需求修改为右侧固定宽度而左侧自适应宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 100%;
height: 300px;
background: #bfbfbf;
margin-right: -300px;
}
.right {
float: right;
width: 300px;
height: 300px;
background: #efefef;
}
</style>
</head>
<body>
<p>3 如果将需求修改为右侧固定宽度而左侧自适应宽度</p>
<div class="left">left</div>
<div class="right">right</div>
</body>