今天，在網(wǎng)上看到一個(gè)題目蔓搞，關(guān)于布局的胰丁，左邊固定寬，右側(cè)自適應(yīng)（不少于3種方法）喂分，看到問(wèn)題手癢自己試了一下锦庸，想了四種方法，碼一下蒲祈。
有好的方法甘萧，可以告訴我！
html:
<h3>第一種:定位+margin-left</h3>
<div class="cont">
<div class="one">左側(cè)定寬200px</div>
<div class="two">右側(cè)自適應(yīng)</div>
</div>
<h3>第二種：flex</h3>
<div class="cont1">
<div class="a">左側(cè)定寬200px</div>
<div class="b">右側(cè)自適應(yīng)</div>
</div>
<h3>第三種：定位+浮動(dòng)+padding-left+ box-sizing</h3>
<div class="cont2">
<div class="a1">左側(cè)定寬200px</div>
<div class="b1">右側(cè)自適應(yīng)</div>
</div>
<h3>第四種:浮動(dòng)</h3>
<div class="cont3">
<div class="a2">左側(cè)定寬200px</div>
<div class="b2">右側(cè)自適應(yīng)</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>
自己碼一下梆掸，效果更好扬卷！
