Question

我想并排放置两个元素，但是按钮元素应该占用所需的空间，以便将所有文本保持在一行中。如果需要，h1元素应该根据button元素占用的空间包装到第二行。

基本上，我想支持动态更改文本长度，而不为h1或button元素定义静态宽度。这有可能实现吗？

链接到我的Fiddle。

section {
  width: 600px;
}

h1 {
  float: left;
  /* Width can't be used here, cos the texts are different length at different times */
  width: 400px;
}

button {
  float: right;
  margin-top: 20px;
}

<section>
  <!-- Header should wrap to second if needed, based on how much button element uses space -->
  <h1>Dynamic text that should wrap to second line if needed, because the text is sometimes pretty long</h1>
  <!-- Button should use as much space as possible to fit the text on one line-->
  <button>Dynamic button text</button>
</section>

Answer 1

这是flexbox解决方案。将display: flex;添加到容器元素（在本例中为<section>）并将flex-grow: 1添加到标题中 - 这会使标题展开以填充可用空间。

一个副作用是默认情况下按钮将垂直拉伸（以匹配标题的高度）。您可以通过明确设置按钮的height或将按钮包裹在<div>中来解决此问题。如果您这样做，新的<div>将垂直拉伸，但按钮将保持正常大小。

section {
  width: 600px;
  display: flex;
}

h1 {
  flex-grow:1;
  width: 400px;
}

button {
  margin-top: 20px;
}

此处它在fork of your fiddle中有效（我在按钮周围添加了额外的<div>）。

动态元素并排

1 个答案: