Question

我正在尝试制作两个列（一个带有照片和选择，另一个带有textarea）。我需要我的textarea与照片，按钮和选择的列高度相同。

我把DIV画成了黑色，在“flex”的帮助下，它与左边的一样大小。但是将height=100% !improtant;设置为textarea无济于事。

此外，设置height=500px !important效果很好并使其为500px，因此尺寸确实在变化。但是100％没有给我正确的结果。

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height"></textarea>
  </div>
</div>

Answer 1

您已应用'display：flex;'错误的元素。只需将flex添加到textarea容器中，即

//Find Maximum of 7 integer Number
#include<iostream>
using namespace std;
int main()
{
//Declaration   
int a,b,c,d,e,f,g,max;
    cout<<"Enter Values : ";
    cin>>a>>b>>c>>d>>e>>f>>g;
    max=a;
    if(b>max)
        max=b;
    if(c>max)
        max=c;
    if(d>max)
        max=d;
    if(e>max)
        max=e;
    if(f>max)
        max=f;
    if(g>max)
        max=g;
    cout<<"Maximum is : "<<max;
    return 0;
}

Answer 2

使用jquery我们可以根据需要获得高度

＆＃13;

$( document ).ready(function() {
    var rightBoxHeight = $('.right-box-height').height();
  $('.left-box-height').css('height',rightBoxHeight);  
});

＆＃13;

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1 right-box-height">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height left-box-height"></textarea>
  </div>
</div>

＆＃13;

Textarea不填充父div的高度

2 个答案: