Question

我创建了两列柔性和包裹的标签。我有两个问题，我无法弄清楚如何使用CSS解决。

我希望所有标签的高度等于最高标签。
最后一个元素不是div宽度的一半，但会扩展到div的整个宽度。

HTML：

<div>
  <label>
    <input type="checkbox"/>
    <span > 1-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 2-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 3-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 4-very_short_word </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 5-medium_length_word </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 6-still_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 7-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces   </span>
  </label>
</div>

CSS：

span {
  margin-left: 14px;
  word-break: break-all;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  background-color: yellow;
}

label {
  box-sizing: border-box;
  background: white;
  color: black;
  padding: 10px;
  margin: 10px 10px 20px 10px;
  border: 1px solid black;
  flex-grow: 1;
  flex-shrink: 1;
  width: calc(100% / 3); // n_rows + 1;
  max-width: calc(50% - 20px); // 50% minus the pixels
}

div {
  height: 200px;
  background-color: lightblue;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
}

更新：我已经确定了第二项要求。但是，第一个仍然存在。如果CSS不可能，我如何使用js使标签等于最大的标签？

Answer 1

将标签上的最大宽度设置为max-width: calc(100%/3);，以解决占据整个屏幕的最后一个元素的问题。

不幸的是，我认为帮助css情况的唯一方法是设置最小高度但是我总是有机会超过这个高度。我能真正想到的唯一方法就是使用Javascript。

Answer 2

你究竟想要什么？您将每个标签的宽度设置为100％/ 3，然后您已经给它们carr = cell(numel(R), numel(C)); k1 = reshape(k,numel(R),numel(C)); for ii = 1:numel(R) for jj = 1:numel(C) carr(ii,jj)=repmat(K1(ii,jj), R(ii), C(jj)); end end result = cell2mat(carr)，这使它们全都变大了。移除flex-grow并解决问题，不是吗？或者给最后一个孩子一个较小的增长值？我不确定它应该是什么样的。

在CSS中无法使它们与最高的高度相同。使用JavaScript，您可以创建一个在调整窗口大小时运行的函数。它必须执行以下操作：

flex-grow:1;

如何使用flexbox使所有标签的高度相同？

2 个答案: