工作中需要實(shí)現(xiàn)下圖這種效果: 搜索框?qū)挾入S屏幕動(dòng)態(tài)變化，搜索按鈕寬度固定。
Paste_Image.png
這其實(shí)是經(jīng)典的兩欄布局問(wèn)題，可以通過(guò)absolute定位來(lái)實(shí)現(xiàn)。（實(shí)現(xiàn)方式有很多種，后續(xù)補(bǔ)上。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>兩欄布局</title>
</head>
<body>
<div class="wrap">
<div class="search_div">
<input class="search_input"/>
</div>
<button class="btn">確定</button>
</div>
</body>
</html>
//容器寬度不定
.wrap{
height:200px;
padding-top:20px;
border:1px solid red;
position:relative;
}
//搜索按鈕寬度固定
.btn{
width:60px;
position:absolute;
right:10px;
}
//搜索框?qū)挾炔欢?.search_div{
position:absolute;
left:10px;
right:80px;
}
.search_input{
width:100%;
}
jsbin在線效果預(yù)覽：https://gist.github.com/anonymous/df059eea1bec641d1ac4dd8aa1244f14
