I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1."
To prevent the title from wrapping when narrowing the outer div (the blue frame), I used display:inline-block on the title.
However, I encountered an issue: When I narrow the width of the outer div causing the title to move to the bottom of the image, the image still aligns to the right, similar to "Image 3." What I actually need is for the image to align itself to the left like "Image 2."
Is there any way to remove the float property of the image if the inline-block title moves to the bottom of the image?
https://i.stack.imgur.com/7audQ.png
#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.</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>