浮动图像减小了跨度填充宽度

Question

在我的布局中，我有一些预告文本和一个浮动到左侧的图像，因此文本围绕它流动。

然后我有一个“按钮”，您可以单击它以显示完整的文本。

此“按钮”应显示在文本下方并填满整个宽度。

只要文本足够长以包裹在图像下方，这样我就可以使用例如display: block 使其宽度为 100%。但是当文本很短时，我找不到一种方法来制作一个填充 100% 剩余宽度的元素。

https://jsfiddle.net/ybtshvqL/

在我正在构建的网站中，我使用具有透明到白色背景的这个按钮并将其移动到顶部一些距离，以便淡化文本的下部，使其更直观地显示有更多可用文本.当使用类似 div / block 元素时，它总是被绘制为容器宽度的 100%，并在图像上方（或下方）呈现丑陋。

那么有什么方法可以让 span (display: inline-block) 100% 宽度或 div (display: block) 来兑现浮动？

（或其他一些好主意？）

提前致谢。

Answer 1

如果您愿意将 <span> 更改为 <div> 标记，这是一个简单的解决方法。

HTML：

 <div class="container">
   ...
   <div class="more">Read on ...</div>
 </div>

CSS：

.more {
  border: 1px solid red;
  width: 100%; /* Or another preferred width percentage */
  margin: auto !important;
  text-align: center !important;
}

http://jsfiddle.net/rtkbykbu/