Div不符合内容

Question

我的div存在问题。我将图片向右浮动，我的文字旁边有。我试图制作一个linear-gradient div，但div正在填充整个页面。

那么如何让div仅适合我的内容？

我已尝试inline-block方式，它只是有效地将我的文字清除到图像下方。

问题：

代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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轻松解决此问题，并从min-width:100%删除.Software

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;