html - 跨度填充宽度因 float 图像而减小

Question

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

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

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

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

https://jsfiddle.net/ybtshvqL/

在我正在构建的网站中，我使用了这个带有透明到白色背景的按钮，并向顶部移动了一段距离，以淡化文本的下部，使其更加直观，因为有更多可用文本.当使用像 div/ block 元素这样的东西时，它总是被绘制为容器宽度的 100%，并且在图像上方(或下方)呈现丑陋。

那么有什么方法可以使 span (display: inline-block) 100% 宽度或使 div (display: block) 支持 float ？

(或其他一些好主意？)

提前致谢。

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/