CSS两列布局的N种实现
web前端开发
共 4587字,需浏览 10分钟
·
2020-11-28 03:18
一,什么是两列布局
二,顶端定宽,右侧自适应如何实现?
1、双列直插式
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
font-size:0;
}
.left{
display: inline-block;
width: 100px;
height: 200px;
background-color: red;
vertical-align: top;
}
.right{
display: inline-block;
width: calc(100% - 100px);
height: 400px;
background-color: blue;
vertical-align: top;
}
style>
head>
<body>
<div>
<div>
<span>1234span>
div>
<div>
<span>1234span>
div>
div>
body>
html>
2、双浮动
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right{
float: left;
width: calc(100% - 100px);
height: 400px;
background-color: blue;
}
style>
head>
<body>
<div>
<div>
<span>
123adadadddddddddddddddddddddddddddddddddddddddd
span>
div>
<div>div>
div>
body>
html>
3、浮动+保证金
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right{
margin-left: 100px;
height: 400px;
background-color: blue;
}
style>
head>
<body>
<div>
<div>
<p>1234p>
div>
<div>
<p>1234p>
div>
div>
body>
html>
4、浮动+ BFC
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
overflow: hidden;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right{
overflow: auto;
height: 400px;
background-color: blue;
}
style>
head>
<body>
<div>
<div>111111111111111111111111div>
<div>111111111111111111111111111111111111111111111div>
div>
<div>div>
body>
html>
5、绝对+左边距
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
position: relative;
}
.left{
position: absolute;
width: 100px;
height: 200px;
background-color: red;
}
.right{
margin-left: 100px;
height: 400px;
background-color: blue;
}
style>
head>
<body>
<div>
<div>div>
<div>div>
div>
body>
html>
6、flex布局
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
display: flex;
}
.left{
width: 100px;
height: 200px;
background-color: red;
}
.right{
flex: 1;
height: 400px;
background-color: blue;
}
style>
head>
<body>
<div>
<div>div>
<div>div>
div>
body>
html>
三,左右两端元素都自适应
1、浮动+ BFC
2、table布局
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.parent{
display: table;
width: 100%;
}
.box{
display: table-cell;
width: 0.1%;
}
.left{
margin-right: 20px;
background-color: red;
height: 200px;
}
.right{
display: table-cell;
background-color: blue;
height: 300px;
}
style>
head>
<body>
<div>
<div>
<div>126545453dddddddd453453453div>
div>
<div>12121div>
div>
body>
html>
3、flex布局
4、网格布局
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.parent{
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
.left{
background-color: red;
height: 200px;
}
.right{
height:300px;
background-color: blue;
}
style>
head>
<body>
<div>
<div>1111111111111111111111111div>
<div>div>
div>
body>
html>
评论