CSS两栏布局

工作中需要实现下图这种效果: 搜索框宽度随屏幕动态变化,搜索按钮宽度固定。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端7班+余愿 两栏布局指的是,页面分为三部分,头部、中间、尾部。而中间部分又分为两部分,侧边栏和主要内容部分。侧...
    Tuseday阅读 4,622评论 0 3
  • 实现左侧固定,右侧自适应。思路,布局最关键的是让block元素并排排列,简单用float就行。之后就是画两个矩形就...
    鸭梨山大哎阅读 1,937评论 0 1
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,672评论 7 249
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 姓名 周云 企业名称 宁波禾隆新材料股份有限公司 组别 301期 利他一组 【日精进打卡第043天】 【知~学习...
    J0hn先生阅读 1,410评论 0 0