如何在固定宽度元素之间最大化元素的宽度？

Question

我的工作如上所述。左边（img）和右边（按钮）的宽度是固定的，中间的（textarea）的宽度应该是灵活的。

它必须像max-width属性一样工作。

当窗口的大小缩小时，textarea的大小也应该缩小。

但在这种情况下，max-width属性不能正常工作。

当窗口的大小达到A的长度时，textarea的宽度应该开始收缩，但它不会。

相反，当窗口的宽度达到B的长度时，它会开始收缩。

下面显示窗口缩小时会发生什么。

对于css这个问题我该怎么办？或者我需要使用javascript吗？

HTML

<div id="div_target">
    <p>
        <img src="~~~"/>
    </p>
    <p> 
        <textarea id="target" cols="40"></textarea>
    </p>
    <p>
        <input type="submit" value="등록"/>
    </p>
</div>

CSS

#div_target{
    width:60%;
}
#target{
    max-width:60%;
}

Answer 1

如果我理解正确，你的问题是缩小小尺寸设备中textarea的宽度。 尝试以下结构：

<div class="col-xs-12 target">
    <div >
      <img src="~~~"/>
    </div>
    <div>
      <textarea></textarea>
    </div>
    <div>
      <input type="submit" value="등록"/>
    </div>   
  </div>

.target{
   text-align: center;
   display: inline-block;
 }

 textarea{
   width: 60%;
 }

我相信您希望在“md”和“lg”中使用内联元素，以便您可以定义： display：inline-block; 对于大型设备中的元素。

Answer 2

这是使用CSS flexbox的一种方法：

#div_target{
    display: flex;
    width: 60%;
}
#div_target > * {
  margin: 5px;
}

<div id="div_target">
  <img src="http://placekitten.com/g/50/50">
  <textarea id="target" cols="40"></textarea>
  <input type="submit" value="등록" />
</div>

jsFiddle

Answer 3

.target{
      text-align: center;
      display:block;
    }
    textarea{
      width: 60%;
    }
    

<div class="col-xs-12 target">
    <div >
      <img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
    </div>
    <div>
      <textarea></textarea>
    </div>
    <div>
      <input type="submit" value="등록"/>
    </div>   
  </div>