Utwórz przyciski 100%, gdy tekst przesunie go poniżej obrazu

Question

Jest to skomplikowany problem i nie wiem nawet, czy jest to możliwe tylko w przypadku CSS.

Mam obraz, kawałek tekstu i dwa przyciski. Kiedy tekst jest mały i nie rośnie poniżej obrazu, chcę, aby przyciski były obok obrazu. Ale gdy tekst jest tak duży, że trzeba kontynuować pod obrazkiem, chcę, żeby przyciski urosły do ​​100% szerokości. Krótko mówiąc, chcę, aby przyciski miały taki sam rozmiar jak tekst.

To jest pożądany wynik dla małego tekstu.

Jest to pożądany efekt, gdy tekst rośnie

to możliwe zrobić tylko z CSS?

Utworzono kodek dla mojej bieżącej konfiguracji (tylko mały tekst). http://bit.ly/1TwajIf

Answer 1

DEMO (spróbuj zmienić wysokość .img lub szerokość wyjścia)

świetne pytanie! jest to faktycznie możliwe przy użyciu tylko css.

zrobiłem obraz float: left następnie użyć elastycznego pole do pojemnika z przyciskami jak

.fill{ 

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

.fill>*{ 

    flex-grow: 1; 

} 

czeku demo do pełnej szczegółowości