我想要实现的是让左侧的 3 个浅绿色 input
垂直等间距,并且最上面的那个的顶部与 的顶部对齐>textarea
在右侧,并且最底部的底部与该 textarea
的底部对齐。我知道这有点啰嗦,但从这张照片中应该可以明显看出,其中 textarea
有点太高了,我想做的是:
http://s13.postimg.org/kv1z0aenb/Capture.png
(希望我可以嵌入图片,但我没有足够的声誉。)
在 Chrome 和 Firefox 中正确处理之前,我一直在处理像素问题,但在 Internet Explorer 中就不一样了。所以我需要一个更好的方法来解决这个问题。
HTML:
<div class="row">
<div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
<input type="text" class="hide-after-sendoff" name="name" value="Your Name" />
<input type="text" class="hide-after-sendoff" name="email" value="Your Email Address" />
<input type="text" class="hide-after-sendoff" name="phone" value="Your Phone Number" />
</div>
<div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
<textarea class="hide-after-sendoff" name="comments" rows="6" />' . $bigBoxTxt . '</textarea>
</div>
</div>
CSS:
.contact-form input, .contact-form textarea {
border: 0;
color: #FFF;
background: #AED270;
padding: 0.5em;
width: 100%;
}
.contact-form input + input {
margin-top: 1em;
}
.contact-form textarea {
max-width: 100%;
resize: none;
}
这是我的逻辑:
由于 textarea
有 6 个 rows
和一个 0.5em
的 padding
,它的总高度应该是
0.5em + 6em + 0.5em = 7em
因为左边的 inputs
有一个 padding
的 0.5em
底部的 2 个有一个 margin-top
1em
,它们的总高度应该是
0.5em + 1em + 0.5em + 1em + 0.5em + 1em + 0.5em + 1em = 7em
所以他们应该是相等的。正确的?或者我怎样才能做得更好?
最佳答案
一些 jQuery 可能会挽救这一天:
textarea {
height: 100%;
}
$('#textarea-wrap').height($('#inputs-wrap').outerHeight());
在 Chrome、IE11 和 Edge 中测试。
关于html - 如何让 3 个输入具有与它们旁边的文本区域相同的组合高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32142867/