css：flex和float margin布局
2021-02-09 20:15
标签：ade nta header ack 宽高 pre nbsp block idt 宽高实际需要，不设置高度，通过子元素自动撑起。 因为排在后面的浮动元素会把前面的块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以元素排序为： css：flex和float margin布局 标签：ade nta header ack 宽高 pre nbsp block idt 原文地址：https://www.cnblogs.com/Nyan-Workflow-FC/p/13059028.html一、flex布局
顶部，底部固定，中间自适应(中间左固定，右自适应)。
body>
div class="container">
div class="header">div>
div class="content">
div class="left">div>
div class="right">div>
div>
div class="footer">div>
div>
body>
style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background-color: yellow;
display: flex;
flex-direction: column;
}
.header {
height: 80px;
background-color: red;
}
.content {
flex: 1;
display: flex;
background-color: green;
}
.left {
width: 200px;
background-color: hotpink;
}
.right {
flex: 1;
background-color: yellow;
}
.footer {
height: 80px;
background-color: blue;
}
style>
三栏平均分布局（两边可以定框）
body>
div class="container">
div class="left">div>
div class="middle">div>
div class="right">div>
div>
body>
style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background-color: yellow;
display: flex;
}
.left {
flex: 1;
background-color: red;
}
.middle {
flex: 1;
background-color: green;
}
.right {
flex: 1;
background-color: blue;
}
style>
二、float + margin
两栏布局
body>
div class="container">
div class="left">div>
div class="right">div>
div>
body>
style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background-color: yellow;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right {
margin-left: 200px;
height: 100%;
background-color: green;
}
.container::after{
content: ‘‘;
display: block;
clear: both;
}
style>
两边固定中间自适应
body>
div class="container">
div class="left">div>
div class="right">div>
div class="middle">div>
div>
body>
style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background-color: yellow;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right {
float: right;
width: 200px;
height: 100%;
background-color: green;
}
.middle {
margin-left: 200px;
margin-right: 200px;
height: 100%;
background-color: blue;
}
style>
body>
div class="container">
div class="left">div>
div class="right">div>
div class="middle">div>
div>
body>
上一篇：超简单的jq图片上传
下一篇：js实现继承的方式
文章标题：css：flex和float margin布局
文章链接：http://soscw.com/index.php/essay/53236.html