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

Question

简化的设置 - 因为它是从第三方系统维护和导入的，所以不会更改：有一个列表元素，其宽度取决于屏幕大小。 在里面：我有一个包含标题的 div。 之后，我有一个 div 包含由图像和文本组成的描述。

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

我现在想要做的是使图像与标题一致，但如果标题占用太多空间以致图像不再适合（小屏幕尺寸），则图像应该“分解”成新行。

赋予图像float:right;margin-top:-40px; 或float:left;margin-top:-40px;margin-left:longestHeadingTxt+5px我可以将图像从描述中“拉出”。 但是如果标题几乎占据了整个屏幕尺寸并且图像应该在下一行中，我无法中断浮动（如果标题很短，在宽屏幕上向右浮动看起来很奇怪）。

我尝试了很多东西，但我找不到解决方案......有人可以帮我解决这个问题吗？

 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

您可以尝试如下：

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