html固定右侧显示,html+css布局之--左边固定宽，右侧自适应（4种方法）
今天，在網上看到一個題目，關于布局的，左邊固定寬，右側自適應(不少于3種方法)，看到問題手癢自己試了一下，想了四種方法，碼一下。
有好的方法，可以告訴我！
html:
第一種:定位+margin-left
左側定寬200px右側自適應第二種：flex
左側定寬200px右側自適應第三種：定位+浮動+padding-left+ box-sizing
左側定寬200px右側自適應第四種:浮動
左側定寬200px右側自適應css:
* {
margin: 0;
padding: 0;
}
/*****第一種******/
.cont {
height: 200px;
overflow: hidden;
border: 1px solid #000;
}
.one {
width: 200px;
height: 200px;
background: #ccc;
position: absolute;
}
.two {
height: 200px;
background: #f60;
margin-left: 200px;
}
/*****第二種******/
.cont1 {
height: 200px;
overflow: hidden;
border: 1px solid #000;
display: flex;
}
.a {
width: 200px;
height: 200px;
background: #ccc;
}
.b {
height: 200px;
background: #f60;
flex: 1;
}
/****第三種*******/
.cont2 {
height: 200px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.a1 {
width: 200px;
height: 200px;
background: #ccc;
position: absolute;
left: 0;
top: 0;
}
.b1 {
width: 100%;
height: 200px;
background: #f60;
position: absolute;
left: 200px;
top: 0;
padding-right: 200px;
box-sizing: border-box;
}
/*****第四種******/
.cont3 {
height: 200px;
border: 1px solid #000;
}
.a2 {
width: 200px;
height: 200px;
background: #ccc;
float: left;
}
.b2 {
width: 100%;
height: 200px;
background: #f60;
}
自己碼一下，效果更好！
總結
以上是生活随笔為你收集整理的html固定右侧显示,html+css布局之--左边固定宽，右侧自适应（4种方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mate 10android o主题,M
- 下一篇： html游戏禁止微信浏览器下拉,Java