Divコンテンツにフィッティングしない

Question

私のdivに問題があります。私は右にイメージを浮かべています、そして、私はそれの横にテキストを持っています。 linear-gradient divを作成しようとしていますが、divはページ全体を埋めています。

私はどのようにして自分のコンテンツに合ったdivを作成しますか？

私はinline-block方法を試しました。それは画像の下に自分のテキストをクリアするだけです。

問題：

---

コード：

.Popcorn { 
 
    float: right; 
 
    position: relative; 
 
    top: -45px; 
 
} 
 
.Software { 
 
    padding: 4px; 
 
    min-width: 100%; 
 
    padding-top: 20px; 
 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0; 
 
}

<img src="/img/popcorn_edited.png" class="Popcorn" /> 
 
<div class="Software"> 
 
    <h3>The Software You Want!</h3> 
 
    <br> 
 
    <p>Android is the World's leading mobile and tablet operating system. This means no learning curves for Android users. The media box is powered by Android which allows you to download applications and share it with all your Android devices or vice versa. 
 
    You can download from millions of apps, games, books, movies and more on the Google Play store.</p> 
 
</div>

Answer 1

ます場合は、calc()機能で勾配であなたのdivに幅を設定することができます知っている

.Software { 
    padding: 4px; 
    width: calc(100% - 350px); 
    padding-top: 20px; 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0; 
} 

Fiddle here

Answer 2

1.）にDIV

2）も浮上画像を覆うように容器にoverflow: auto;の割り当てを画像入れ：ポップコーン画像は、固定幅を有しています。

<div class="Software"> 
    <img src="/img/popcorn_edited.png" class="Popcorn"/> 
    <h3>The Software You Want!</h3> 
    <p>Android is the World's leading mobile and tablet operating system. This means no learning curves for Android users. The media box is powered by Android which allows you to download applications and share it with all your Android devices or vice versa. You can download from millions of apps, games, books, movies and more on the Google Play store.</p> 
</div> 

.Popcorn { 
    float: right; 
    position: relative; 
    top: -45px; 
} 
.Software { 
    overflow: auto; 
    padding: 4px; 
    min-width: 100%; 
    padding-top: 20px; 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0; 
} 

Answer 3

あなたは簡単に、私はあなたの質問を理解していないflexboxでこれを解決するため、プラス.Software

body { 
 
    margin: 0 
 
} 
 
.wrap { 
 
    display: flex 
 
} 
 
.Software { 
 
    padding: 4px; 
 
    padding-top: 20px; 
 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="wrap"> 
 
    <div class="Software"> 
 
    <h3>The Software You Want!</h3> 
 
    <br> 
 
    <p>Android is the World's leading mobile and tablet operating system. This means no learning curves for Android users. The media box is powered by Android which allows you to download applications and share it with all your Android devices or vice versa. 
 
     You can download from millions of apps, games, books, movies and more on the Google Play store.</p> 
 
    </div> 
 
    <img src="//lorempixel.com/100/100" class="Popcorn" /> 
 
</div>