html - 响应地改变div的大小

Question

我在弄清楚如何根据我正在使用的 div 周围的其他 div 响应地更改 div 的大小时遇到​​问题。我在页面左侧和右侧都有按钮，中间有一些文本，范围从 0 个字符到 140 个字符。

我想做的是，随着实际页面大小的变化，外面的按钮向内移动，中间 div 中可见的文本量将缩小。最初，我研究过用 % 设置宽度，但这并没有给我想要的结果。无论有多少空间，它都不会让它占据，而是总是被迫保持小于最大值。 (因此，如果我将最大宽度设置为 40% 并在宽屏中打开页面，以允许文本填充整个中间区域，那么我实际想要的最大宽度将是 50%。问题反过来也。将它设置为最大 50%，但页面较小，所以我实际上只希望它占据页面的 40%)

我需要一些东西来改变中间元素的大小，同时将外部元素保持在页面外部，直到中间元素达到一定宽度(例如，如果中间有文字，不要不要让它占据页面的 15% 以下)。

.leftSide {
  float: left;
}

.middle {
  display: inline-block;
  padding-left: 5px;
  min-width: 15%;
  background: #ccc;
}

.rightSide {
  float: right;
}

<div class="header">

  <div class="leftSide">
    <button>Save</button>
    <button>Next</button>
    <button>Back</button>
  </div>

  <div class="middle">Some text here - min char 0, max 140</div>

  <!--Comment out the class: middle above and uncomment the class: middle below to see what I mean with the length being a problem when resizing the page-->

  <!--<div class = "middle">Text could also be really long like this one is. The cow jumped over the moon bla bla bla.... </div> -->

  <div class="rightSide">
    <button>Cancel</button>
    <button>Other Button</button>
  </div>

</div>

我还将我的代码放入以下 ​​jsfiddle:https://jsfiddle.net/KR8T3/8vywe1zr/14/(为简单起见，对于我在中间使用的 div，我在示例中只使用纯文本。在我的程序中，我从其他地方提取信息，允许文本的字符长度为 0 到 140 之间的任何字符)

Answer 1

如果我理解得很好，你应该使用 css flex 并摆脱 float 。在下面的代码中，我使用了 display: flex; 作为标题和按钮项，我使用了 flex-shrink: 0;，这不会将按钮分成多行和 flex-shrink: 1; 用于中间文本，因此它可以在调整大小时缩小到最小内容。我还将 flex-grow: 1; 放在最后一项，这样它就可以填充空间并使用 text-align: right; 将其定位到右侧。

这就是你要找的吗？

.header {
   display: flex;
}

.leftSide {
  flex-shrink: 0;
}

.middle {
  display: inline-block;
  padding-left: 5px;
  min-width: 15%;
  background: #ccc;
  flex-shrink: 1;
}

.rightSide {
  flex-shrink: 0;
  flex-grow: 1;
  text-align: right;
}

<div class="header">

  <div class="leftSide">
    <button>Save</button>
    <button>Next</button>
    <button>Back</button>
  </div>

  <div class="middle">Some text here - min char 0, max 140</div>

  <div class="rightSide">
    <button>Cancel</button>
    <button>Other Button</button>
  </div>

</div>