CSS两栏布局
2017-01-19 本文已影响0人
独爱一乐拉面
工作中需要实现下图这种效果: 搜索框宽度随屏幕动态变化，搜索按钮宽度固定。
Paste_Image.png
这其实是经典的两栏布局问题，可以通过absolute定位来实现。（实现方式有很多种，后续补上。）
<!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;
}
//搜索框宽度不定
.search_div{
position:absolute;
left:10px;
right:80px;
}
.search_input{
width:100%;
}
jsbin在线效果预览：https://gist.github.com/anonymous/df059eea1bec641d1ac4dd8aa1244f14
