Html CSS确保图像旁边的文本有足够的空间

我正在制作一个响应性强的网页。在屏幕中，您可以在第三幅图像中看到问题。文本的空间太小，无法正常容纳。我可以通过使用javascript解决这个问题，但我更喜欢只使用CSS3。所有元素都是内联的，图像的大小是动态的。图像可以是50px（img1），但也可以是图像足够大，可以全宽显示（img2）

我的html：

<h2>title</h2>
<div class="newsItemImage"></div>
<p class="newsItemText"></p>

我使用不可见的边框和框大小，因为否则我不能使用“最大宽度”并给它一个边距。如果有人知道更好的解决方案，请随时告诉我

---

提前谢谢

CSS不能用于计算内容的大小。我建议您将左侧图像的大小标准化，方法是将其放入一个特定大小的容器中（对于响应站点，最有可能是一个百分比宽度），然后强制图像采用此宽度。然后，您可以在任何情况下使用响应断点将文本精确地置于图像下方。

您可以设置用于文本的

或

，或者使用

{display:block；}

清除其他元素

---

如果您能提供HTML代码以便我们检查结构，那就最好了。

谢谢您的解决方案，但我已经找到了最好的选择。 我在图像后面添加了一个元素，并给它一个css:

display:inline块；宽度：150px

。现在，如果图像旁边的空间小于150px，该元素会自动跳转到图像下面，文本也会跳转

完整代码：

HTML:

---

请分享您的html资源如果您将

最小宽度

添加到

.newsItemText

中会发生什么？html代码的可能副本只是：title

min width实际上没有任何作用，如果我将其调高，它会从框中弹出。媒体查询没有选项，因为我不知道图像会有多大。您的答案中似乎缺少某些内容。使用

inline block

值可能会导致水平滚动条，如果是，请检查我的解决方案：

#pageNewsItem h2 {
    margin: 10px 15px;
}

.newsItemImage {
    float: left;
    margin: -15px 0 -5px 0;
    max-width: 100%;
    border: 15px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

.newsItemText {
    margin: 0 15px 15px 15px;
}

<h2 class="pageHeaderH2">BREEAM - globale milieu - beoordeling van gebouwen</h2>
<img src="img/dummyImages/newsItemThumb1.jpg" id="newsItemImage">
<div id="minSpace"></div>
<p class="newsItemText">Lorem ipsum dolor sit amet, con ... iaculis ul</p>

#pageNewsItem h2 {
    margin: 10px 15px;
}

#newsItemImage {
    float: left;
    margin: -15px 0 -5px 0;
    max-width: 100%;
    border: 15px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

#minSpace{
    display:inline-block;
    width:150px;
}

.newsItemText {
    margin: -15px 15px 15px 15px;
}