ширина заполнения заливки уменьшена плавающим изображением

Question

В моем макете у меня есть текст тизера и изображение, которое перемещается влево, чтобы текст обтекал его.

Тогда у меня есть кнопка, на которую вы можете щелкнуть, чтобы показать полный текст.

Эта «кнопка» должна отображаться под текстом и заполнять всю ширину.

Это не проблема, поскольку текст достаточно длинный, чтобы обернуть изображение ниже, чтобы я мог использовать, например. display: block, чтобы сделать его 100% шириной. Но когда текст короткий, я не нахожу способ сделать элемент, который заполняет 100% от оставшихся ширины.

https://jsfiddle.net/ybtshvqL/

На сайте я в здании я использую эту кнопку с прозрачной до белого фона и перемещается на некоторое расстояние к вершине для того, чтобы исчезнуть нижнюю часть текста, чтобы сделать его более наглядным что имеется больше текста. При использовании чего-то типа элемента div/block он всегда получает 100% ширины контейнера и делает уродливым изображение (или ниже).

Так есть способ сделать либо пролет (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/