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

【问题标题】：How can I maximize the width of an element between fixed-width elements?如何最大化固定宽度元素之间的元素宽度？
【发布时间】：2016-12-24 12:59:29
【问题描述】：

我的工作看起来像上面那样。左侧（img）和右侧（button）的宽度是固定的，中间（textarea）的宽度应该是灵活的。

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

当窗口大小缩小时，文本区域的大小也应该缩小。

但 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%;
}

【问题讨论】：

标签： html css

【解决方案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”中，以便您可以定义：显示：内联块；对于大型设备中的元素。

【讨论】：

啊..不，这不是重点。问题是“它没有在适当的时候开始收缩”，而不是“它在小型设备中收缩”。
您必须在您想要更改大小的媒体查询中更改文本区域的宽度。

【解决方案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

【讨论】：

谢谢！ 'flexbox' 可以很好地应用于我的代码，几乎不需要修改。

【解决方案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>

【讨论】：