今天,在网上看到一个题目,关于布局的,左边固定宽,右侧自适应(不少于3种方法),看到问题手痒自己试了一下,想了四种方法,码一下。
有好的方法,可以告诉我!
html:
<h3>第一种:定位+margin-left</h3>
<div class="cont">
<div class="one">左侧定宽200px</div>
<div class="two">右侧自适应</div>
</div>
<h3>第二种:flex</h3>
<div class="cont1">
<div class="a">左侧定宽200px</div>
<div class="b">右侧自适应</div>
</div>
<h3>第三种:定位+浮动+padding-left+ box-sizing</h3>
<div class="cont2">
<div class="a1">左侧定宽200px</div>
<div class="b1">右侧自适应</div>
</div>
<h3>第四种:浮动</h3>
<div class="cont3">
<div class="a2">左侧定宽200px</div>
<div class="b2">右侧自适应</div>
</div>
css:
<style>
* {
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;
}
</style>
自己码一下,效果更好!
网友评论