html自适应高度的一个问题。 50
现在有一个div，里面让一张图片后面跟一个文本框，然后整个div随着浏览器的大小而缩放。假设div1000px，图片100*100，那么就希望文本框为900*100了。我...
现在有一个div，里面让一张图片后面跟一个文本框，然后整个div随着浏览器的大小而缩放。
假设div1000px，图片100*100，那么就希望文本框为900*100了。
我电脑是1440，那么div就是70%左右，然后图片width：10%，文本框width：90%，height：auto。
发现这样文本框根本不鸟我设置的auto。求大神教我怎么弄这种自适应的效果。
谢谢了~ 展开
假设div1000px，图片100*100，那么就希望文本框为900*100了。
我电脑是1440，那么div就是70%左右，然后图片width：10%，文本框width：90%，height：auto。
发现这样文本框根本不鸟我设置的auto。求大神教我怎么弄这种自适应的效果。
谢谢了~ 展开
展开全部
你想错了，就算是在响应式布局中，类似这样的高度一般也是用固定的，并不会用auto，因为高度如果自适应会造成很多其他的问题，不会限定高度的一般是图片等，因为图片的宽高需要成比例，不然会出现被压缩等问题，除此之外其他的基本都是会用固定的高度的。你可以把那个图片用定位，然后给这个div添加一个padding-left属性，然后给input设定为100%就可以了，因为div默认的就是占用一整行，简单代码如下：
<div style="padding-left:50px; position:relative;">
<img src="tu.jpg" width="40" height="20" style="position:absolute; left:-45px;"/>
<input type="text" style="width:100%;" />
</div>
简单的代码就是上面这个样子的，具体的你自己根据设计稿在进行细微的调整吧。
更多追问追答
追问
这样做不行的。
追答
哪样做不行？说清楚点
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery 你这个问题是响应式布局的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0 ;padding:0;}
.demo{margin-left:46px;height:45px;margin-top: 100px;}
.forimg{margin-left:-46px;float:left; height: 45px;}
.forinput{width:100%;height:45px;}
.inputwrap{border:1px solid #dfdfdf;}
.inputwrap input{border:none;display:block;width:90%;padding:0 5%;height:43px;line-height:43px;font-size:16px;}
</style>
</head>
<body>
<div class="demo">
<div class="forimg"><img src="2015-08-11_170334.jpg"></div>
<div class="forinput"><div class="inputwrap"><input placeholder="搜索"></div></div>
</div>
</body>
</html>
带入你那个搜索的图标图片，路径正确即可查看效果。
你说的意思更像是宽度自适应而不是高度自适应。
你是希望固定了左边的宽度，右边的输入框随着浏览器窗口大小的改变而自动改变宽度吧
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0 ;padding:0;}
.demo{margin-left:46px;height:45px;margin-top: 100px;}
.forimg{margin-left:-46px;float:left; height: 45px;}
.forinput{width:100%;height:45px;}
.inputwrap{border:1px solid #dfdfdf;}
.inputwrap input{border:none;display:block;width:90%;padding:0 5%;height:43px;line-height:43px;font-size:16px;}
</style>
</head>
<body>
<div class="demo">
<div class="forimg"><img src="2015-08-11_170334.jpg"></div>
<div class="forinput"><div class="inputwrap"><input placeholder="搜索"></div></div>
</div>
</body>
</html>
带入你那个搜索的图标图片，路径正确即可查看效果。
你说的意思更像是宽度自适应而不是高度自适应。
你是希望固定了左边的宽度，右边的输入框随着浏览器窗口大小的改变而自动改变宽度吧
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
line-height:auto;试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
