html - 当行内 block 移动到图像底部时，移除图像的 float 属性

Question

我有三个元素，一个是标题，一个是段落，一个是图片。现在，我希望图像向右浮动，让标题和段落向左和底部 float ，如“图片 1”。

为了在缩小外部 div(蓝色框)的同时不使标题的文字换行，我在标题上使用了 display:inline-block。

但问题是: 如果我缩小外部 div 的宽度，使标题移动到图像的底部，图像仍然向右对齐，如“图像 3”。但我需要的是像“图片 2”这样的图片，该图片应向左对齐。

如果行内 block 标题移动到图像底部，是否有任何方法可以删除图像的 float 属性？

#div0{
  width: 1000px;
}

#div1{
  width: 550px;
}


.outer{
  margin: 20px 0;
  border: 1px solid blue;
}

.image{
  float: right;
}

.title{
  display: inline-block;
}

.paragraph{
}

<div id="div0" class="outer">
    <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" class="image" />
    <h1 class="title">This Is the Title...</h1>
    <div class="paragraph">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
</div>

<div id="div1" class="outer">
    <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" class="image" />
    <h1 class="title">This Is the Title...</h1>
    <div class="paragraph">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
</div>

Answer 1

您可以使用媒体查询。

@media only screen and (max-width:960px) {
    .image{
      float: none;
    }
}

您可以将“960px”更改为您希望更改发生的宽度。