当文本将图像推到图像下方时，按钮100％

Question

这是一个复杂的问题，我甚至不知道是否只能使用CSS。

我有一张图片，一段文字和两个按钮。当文本较小，并且没有在图像下方生长时，我希望按钮是图像的下一个。但是当文本太大时，它需要继续在图像下方，我希望按钮增长到100％宽度。 长话短说，我希望按钮与文本大小相同。

这是小文字的理想结果。

这是文本增长时所需的结果

这只能用CSS吗？

我为我当前的设置创建了一个codepen（只有小文本）。 http://bit.ly/1TwajIf

Answer 1

DEMO（尝试更改.img的高度或输出的宽度）

好问题！这实际上只能使用css。

我制作了图像float: left，然后使用弹性框作为按钮的容器，如

.fill{

  outline: 1px solid red;
  display: flex;
}

.fill>*{

  flex-grow: 1;

}

查看演示以获取完整的详细信息