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。在下面的代码中，我将MailMessage.Body用于标题和按钮项，并将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的大小

1 个答案: