使 div2 中的 img 元素表现得像以前的 div1 中的内联块

Question

The simplified Setup - which is not subject to change because it is maintained and imported from a third-party system: There is a list-element with a variable width depending on screensize. Inside that: I have a div containing heading. After that I have a div containing the description which consists of an image and an text.

<ul>
<li>
<div class="heading">Heading</div>
<div class="description">
    <img src="image.png"><br><p>Some generic text</p>
</div>
</li>
</ul>

What I want to do now is having the image in line with the heading, but if the heading takes so much space that the image won't fit anymore (small screen sizes) the image should "break" into a new line.

With giving the image float:right;margin-top:-40px; or float:left;margin-top:-40px;margin-left:longestHeadingTxt+5px I can "pull" the image out of the description. But with float I can not break if the heading almost takes up the whole screen size and the image should be in the next line (also float right looks strange on wide screens if the heading is very short).

I tried a lot of things but I just can't find a solution... Could someone please help me to solve this?

 ul {width: 580px;} li {list-style-type: none; margin-top: 80px;}.descriptionFakingLook img {float: left; margin-top: -28px; margin-left: 130px;}.descriptionRight img {float: right; margin-top: -28px;}.descriptionLeft img {float: left; margin-top: -28px; margin-left: 200px;}

 <ul> <li> <div class="heading">How it looks now</div> <div class="description"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p> </li> <li> <div class="heading">How it should look</div> <div class="descriptionFakingLook"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>This is how it should look no matter how long the heading is. But if heading and image don't fit into one line the image should just be under the heading like how it looks now.</p> </li> <li> <li> <div class="heading">shortH</div> <div class="descriptionRight"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>Short heading looks akwaard if the image floats right, but also there would be no line break as in the example below.</p> </li> <li> <div class="heading">long heading which is long in the example but could happen with a sreen 320px wide</div> <div class="descriptionLeft"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>this floats left but has a lot of problems of course. </p> </li>

Answer 1

You can try like below:

 .heading { float: left; margin-top: 10px; clear: left; font-weight: bold; }.description img { float: left; margin-left: 10px; }.description img ~ p { clear: left; }

 <div class="heading">How it looks now</div> <div class="description"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p> </div> <div class="heading">A very very loooong heading, yes too long</div> <div class="description"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p> </div> <div class="heading">A very very loooong heading, yes too long A very very loooong heading, yes too long A very very loooong heading, yes too long A very very loooong heading, yes too long</div> <div class="description"><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p> </div>