Question

我想要实现的是让左边的3个浅绿色app.checklick.com/programs/Checklick-Logo-White-Transparent.png垂直等间隔，并且最顶端的顶部与input的顶部对齐在右边，也让最底部的底部与textarea的底部对齐。我知道这是一个满口的，但从这张照片中可以看出，textarea略高，我正在尝试做的事情：

http://s13.postimg.org/kv1z0aenb/Capture.png

（希望我可以嵌入图片，但我没有足够的声誉。）

我已经弄乱了像素，直到我在Chrome和Firefox中使用了它，但是在Internet Explorer中却不一样。所以我需要一个更好的方法来解决这个问题。

HTML：

textarea

CSS：

<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>

Demo

这是我的逻辑：

由于.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; }有6 textarea和rows padding，因此其总高度应为

0.5em

由于左0.5em + 6em + 0.5em = 7em的{{1}}为inputs，因此底部2的padding为0.5em，其总高度应为

margin-top

所以他们应该是平等的。对？或者我怎样才能更好地做到这一点？

Answer 1

一个小jQuery可能会节省一天：

textarea {
    height: 100%;
}

$('#textarea-wrap').height($('#inputs-wrap').outerHeight());

<强> here

在Chrome，IE11和Edge中测试。

Answer 2

我相信你可以通过增加一些额外的bootstrap类来实现这一目标。

将表单控件类添加到输入中，并使用form-group类将它们包装在div中。

像这样：

<div class="row">
<div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <input type="text" class="hide-after-sendoff form-control" name="name" value="Your Name" />
   </div>
   <div class="form-group">
      <input type="text" class="hide-after-sendoff form-control" name="email" value="Your Email Address" />
   </div>
   <div class="form-group">
      <input type="text" class="hide-after-sendoff form-control" name="phone" value="Your Phone Number" />
   </div>
</div>
<div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
   <textarea class="hide-after-sendoff form-control" name="comments" rows="6" />' . $bigBoxTxt . '</textarea>
</div>

jsFiddle Link

清理jsFiddle链接由@isherwood提供

如果您调整输出窗口的大小，您可以看到它们如何堆叠/取消堆叠。

如何获得3个输入与其旁边的textarea具有相同的组合高度？

2 个答案: