CSS布局——左边固定,右边自适应的4种方法
程序员文章站
2022-04-30 09:42:52
...
HTML:
<div class="outer">
<div class="left">我在左边</div>
<div class="right">我在右边</div>
</div>
<div class="footer">我在底部</div>
方法一:
body{
text-align: center;
.outer{
:after{
display: block;
content:'';
clear: both;
visibility: hidden;
}
.left{
float: left;
width:500px;
height: 500px;
line-height:500px;
background-color: darkcyan;
}
.right{
width:100%;
// margin-left:500px;
// height: 100px;
line-height: 500px;
background-color: gold
}
}
.footer{
background-color: green;
height: 100px;
line-height: 100px;
}
}
方法二:
body{
text-align: center;
.outer{
position: relative;
.left{
position: absolute;
left:0;
top: 0;
width: 500px;
height: 500px;
line-height: 500px;
background-color: firebrick;
}
.right{
//width:100%;
height: 500px;
line-height: 500px;
margin-left:500px;
background-color: fuchsia;
}
}
.footer{
background-color: gold;
height:100px;
line-height: 100px;
}
}
方法三:
body{
text-align:center;
.outer{
display: table;
width: 100%;
}
.left,.right{
display:table-cell;
line-height: 500px;
}
.left{
width:200px;
height: 500px;
background-color: deepskyblue;
}
.right{
background-color: darkorchid;
}
.footer{
height: 100px;
line-height: 100px;
background-color: darkkhaki;
}
}
方法四:
body{
text-align: center;
.outer{
display: flex;
width:100%;
line-height: 200px;
.left{
flex:0 0 200px;
height: 200px;
background-color: chartreuse;
}
.right{
width: 100%;
background-color: blueviolet;
}
}
.footer{
height: 100px;
line-height: 100px;
background-color: darkgray;
}
}
上一篇: Spring环境搭建之:导入jar包、配置文件名称及放置位置
下一篇: SSH配置文件
推荐阅读
-
左侧固定宽度,右侧自适应宽度的CSS布局
-
左侧固定宽度,右侧自适应宽度的CSS布局
-
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
-
css实现两边固定中间自适应布局的四种常用方法
-
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条._html/css_WEB-ITnose
-
DIV+CSS一种简单的左边图片右边多行文字的布局_html/css_WEB-ITnose
-
HTML固定与自适应进行布局的混合使用_html/css_WEB-ITnose
-
DIV+CSS一种简单的左边图片右边多行文字的布局_html/css_WEB-ITnose
-
有两个input标签放到一行,如何实现左边的Input自适应宽度,右边的固定宽度。_html/css_WEB-ITnose
-
HTML固定与自适应进行布局的混合使用_html/css_WEB-ITnose