Question

在我的布局中，我有一些预告文字和一张浮动到左边的图像，所以文字在它周围流动。

然后我有一个＆＃34;按钮＆＃34;您可以单击以显示完整的文本。

这个＆＃34;按钮＆＃34;应显示在文本下方并填充整个宽度。

只要文本足够长以包裹在图像下方，这就没有问题，所以我可以使用例如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/

通过浮动图像缩短填充宽度

1 个答案: