テキストが画像の下にそれをプッシュするとボタンを100％にする

これは複雑なもので、CSSで可能かどうかわかりません。テキストが画像の下にそれをプッシュするとボタンを100％にする

私はイメージとテキストと2つのボタンを持っています。テキストが小さく、画像の下に拡大しないときは、ボタンを画像の隣に配置します。しかし、テキストが非常に大きい場合、ボタンを100％幅に拡大したい画像の下にテキストを続ける必要があります。短いストーリー、ボタンのサイズをテキストと同じにしたい。

これは、小文字の場合の望ましい結果です。

このテキストは

これが唯一のCSSで行うことは可能ですが成長するときに、所望の結果は？

現在のセットアップ（小さなテキストのみ）用のコードペーンを作成しました。 http://bit.ly/1TwajIf

出典

2016-02-23 NLAnaconda

完全な詳細はデモをチェック

.fill{ outline: 1px solid red; display: flex; } .fill>*{ flex-grow: 1; }

のようにボタンのコンテナのフレックスボックスを使用して画像float: leftを作りましたCSSのみ。 –

CSSを使用して実際には可能です:) –

DEMO（.IMGまたは出力の幅の高さを変更してみてください）

グレート質問！これは実際にはcssのみを使用して可能です。

私は、私の知る限り、それは使用可能ではないと知っているよう

出典

2016-02-23 02:29:17

ニース解決！私はフレックスボックスが大好きです。 @ user2740744 - フレックスボックスで読むことができますが、それはまだかなり新しいので、いくつかの奇妙なことを期待していることを理解しています。 IE8を使っている人のためのサイトを開発している場合は、それを使用しないでください。また、現代的なブラウザのサポートにもプレフィックスが必要です。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – tayvano

@Taylorありがとう！ええ、フレックスボックスは常に救助に、ハハハ以来私の人生を変えた –

完璧な作品。どうもありがとう！ – NLAnaconda

テキストが画像の下にそれをプッシュするとボタンを100％にする

答えて

関連する問題