Question

首先，这是小提琴：https://jsfiddle.net/u8v3rgyt/1/

基本情况是：我有一些文本，长度会有所不同。在本文下面，我有一列（编辑：不同数量的）按钮，这些按钮也有不同的文字。我想要的是文本控制整体宽度，然后让按钮列调整其宽度/按钮的宽度作为响应。换句话说，对于两种不同大小的文本，我试图实现以下目标：

// Short text
La la la la
[Button 1
  text]
[Button 2
  with long
  text]

// Longer text
La la la la la la la la la la
[Button 1 text]
[Button 2 with long text]

但我明白了：

// Short text
La la la la
[Button 1 text]
[Button 2 with long text]

我觉得我很接近，但我无法让按钮容器具有正确的宽度（因此我无法限制按钮的宽度）。或者说，我可以，但为了这样做，我必须在文本上放置一个固定的宽度，这不起作用，因为我需要根据文本调整它的大小。

任何帮助都将不胜感激。

Answer 1

据我所知，您希望文本指定按钮布局区域的宽度。使用CSS3 flex box模型，您可以按照以下方式执行操作：

See this fiddle

HTML

<div class="container">
  <p>Some text blah blah blah, blah blah blah</p>
  <div class="inner">
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

CSS

.container {
  display: inline-block;
  border: 1px solid red;
  margin-bottom: 24px;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

button {
  flex-grow: 1;
}

CSS：如何在动态宽度容器内强制执行宽度？

1 个答案: